Vue3组合API-----setup()
1.Vue3最重要的新特性之一:
作用：
之前vue对象规定了我们必须把某一类数据放到某一个结构中，这样在一定程度上对我们的代码进行了强制的分割。而在vue3 中我们引入了setup（）合成API语法，他可以将某数据关联的内容都整合到一个部分，即使setup（）中的内容越来越多，也会围绕着大而不乱的形式开发项目。
2.setup组合api特点：
（1） 更加直观，接近原生js
（2） 按需加载
（3）没有this，降低了耦合性，提高复用性
3.setup（）:
(1)setup（）结构中定义的变量，函数都需要return之后才可以在模板中使用，
(2).setup（）是处于created生命周期之前的函数，也就是说data，methods中的数据是无法访问到的，setup（）结构中的this指向
undefined ref ：在setup中只能包装字符串或数字形式的数据（值），使其变为响应式数据
（3）setup函数只能是同步的不能是异步的。
《1》setup 组件选项：
- 新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。
- setup 中避免使用 this , setup的调用 在 data 、methods、computed 解析之前
- setup 选项是一个接收 props 和 context 的函数
- 将setup 返回的函数 暴露给 组件的其余部分 （计算属性、方法、生命周期）
《2》ref值类型 响应对象：
refs： 可以直接在html模板中使用对象的属性名当变量，不需要用 . 访问 ，实现对简单值的监听
ref注意点：
-在vue（template）中使用ref的值不用通过value获取
-在TS中使用ref的值必须通过value获取
const count = ref(5)，在setup访问count值，count.value 来访问
《3》reactive 引用类型 响应式：
reactive： 在setup中包装对象，数组形式的数据（对象/数组），使其变成响应式数据
reative注意点：
-reative参数必须是对象（json/array）;
-如果给reactive传递了其他对象
-默认情况下修改对象，界面不会自动更新
-如果想更新，可以通过重新赋值的方式
const list = reactive(默认值)
x list = xxx 直接赋值破坏了引用
√ list.push(xxx)
《4》 ref和reactive的区别：
vue在解析数据之前，会自动判断在template里使用的数据是否是ref类型的，如果是，vue自动添加.value
如果在templatel里使用的是reactive类型的数据，则vue不会自动添加.value。
4.setup（）结构中如何使用生命周期函数：
5.vue对象的生命周期函数:
《1》vue对象创建成功之前与创建成功之后: beforeCreated created
《2》页面dom元素（view）与vue对象（model）绑定成功之前与绑定成功之后: beforeMounted mounted
《3》view与model数据更新之前与数据更新之后: beforeUpdate updated
《4》vue对象销毁之前与销毁之后: beforeDestory destoryed
beforeCreate() {
console.log('beforeCreate：vue对象创建成功之前')
},
created() {
console.log('created：vue对象创建成功之后')
},
beforeMount() {
console.log('beforeMount：view与moudel绑定成功之前')
},
mounted() {
console.log('mounted：view与moudel绑定成功之后')
},
beforeUpdate() {
console.log('beforeUpdate:view或model数据更新之前')
},
updated() {
console.log('update:view或model数据更新之后')
},
beforeDestroy() {
console.log('beforeDestory:vue对象销毁之前')
},
destroyed() {
console.log('destory:vue对象销毁之后')
}
