vue3 知识梳理，荣荣最美丽，最可爱了，如此迷人，么么哒

vue3 知识梳理，荣荣最美丽，最可爱了，如此迷人，么么哒

vue3 composition

真的没啥，通过下面例子，你会发现，只是个写法问题

<template>
<div class="container"><!-- <div class="tabs"><button>xihuan</button><button>noxihuan</button></div><div class="content"></div> -->
<div class="container"><h2>{{name}}</h2><h2>{{age}}</h2><button type="primary" @click="go" >店家我吆</button></div></div></template><script lang="ts">
import { defineComponent, reactive} from 'vue';
import 'bootstrap/dist/css/bootstrap.min.css'
import getAllList from "./hook/loadUtil"
import axios from 'axios'// 就会提供些额外的方法
export default defineComponent({name: 'App',// setup 方 法还不能为空，真的很奇葩的事情setup(){const go = ()=>{data.name ="荣荣最美丽，最可爱了，如此迷人，么么哒！"}const methods = {go}// setup 方法会在 created 之前调用// 它有俩形参， props context //一个返回值，用来用来合并到data 或者methods 中去const data = reactive({name:"荣荣",age:24})return {...data}}
});
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

当我们点击按钮时， 荣荣无非修改，这个时候，我们要知道，展开后的属性，就没有响应式了

为了解决这个问题， composition提供了toRefs 方法，这个我们用下

先引入

再使用

这个时候，展开的属性，就变成了有响应式了

点击按钮效果如下：

通过上面例子，我们学会了， 将所有的响应式数据都放到 data 中，便于统一管理，和我们vue2 差不多

方法也一样，也统一放入methods 对象里，也好 我们的vue2 差不多，这样就串起来！ 

是不是很清晰！