vue3.0 组合api的使用

vue3.0相比于2.0，逻辑可以写在一起，而不是data里定义数据，method里定义方法
vue3.0兼容vue2.0的所有API，比如 生命周期

1.setup 起点函数（data和methods）

• 总结

1. vue 2.0的 data 和 methods 在setup函数内部定义，以对象的方式 return {} 就可使用
2. setup函数 组件初始化之前执行（在vue2.0的beforeCreate之前，执行时，this 还不是组件实例，是undefined），它是最早的生命周期函数
3. setup函数 内部return返回的数据和函数可在模版使用，但是数据是静态数据无法响应改变

• 使用

1. 在 setup(){}函数中定义数据和方法
2. 在setup函数内部，以对象的方式 return {} 各个变量和方法

2. 定义复杂数据类型（object，array）响应数据，reactive()函数

• 总结

注意：reactive()函数只实现属性数据响应，在给复杂数据类型整体赋值的时候，视图不会刷新，需要使用ref()函数包裹才可
ref()函数修饰的响应属性，必须使用.value的方式调用

1. vue3.0在修改复杂类型值得时候，如果视图不响应刷新则使用reactive函数，相当于vue2.0里的this.$set() 实现复杂类型数据响应
2. 模板使用时用object.name的方式进行渲染，如果解构使用的话，数据依然不是响应的，需要配合toRef，toRefs函数来实现解构响应

• 使用

1. 引入：import { reactive } from "vue";
2. 创建复杂类型数据时，用reactive ()函数包裹

2.复杂数据类型的属性转响应数据：toRef(obj,propetyName)函数（单个）、toRefs(obj)函数（所有）

• 总结

1. 从响应式数据对象中解构出的属性数据，不再是响应式数据，需要借助toRef()和toRefs
2. toRef 针对的对象必须是响应式的对象数据，即：reactive()函数包裹的对象
3. toRef是函数创建的响应数据，在使用的时候需要给原来对象的属性赋值或者用变量.value的方式进行赋值，不可直接给此变量赋值（切忌）

• 使用

1. 引入：import { reactive,toRef } from "vue";
2. 创建响应属性数据：let age = toRef(student, "age");
3. 给响应数据赋值：age.value = 1001;
4. 导出响应变量：return {age}

toRefs（obj）常用于展开响应式对象

• 总结

1. 就是批量转化，语法和toRef不同，直接传对象即可
2. return {}的时候，需要将refs对象展开，即{...refs函数变量}

• 使用

1. 引入：import { reactive,toRefs } from "vue";
2. 创建响应属性数据：let student_ = toRefs(student);
3. 给响应数据赋值：student_ .age.value = 1001;
4. 展开导出响应变量：return { ...student_}