VUE3详细笔记附测试demohttps://gitee.com/one-reed-an...vue2和vue3的区别Vue2数据定义在数据，方法定义在方法。操作一个数据往往会影响到数据、方法、computed、watch，带来很多逻辑上的耦合，所以vue2给出了一个解决方案就是Mixin，但是Mixin经常会导致命名冲突等各种问题，所以Vue3引入了CompositionAPI解决以上痛点。setupvue3增加了一个属性选项->setup，这是组件中CompositionAPI的入口。组件创建时会在beforeCreate之前执行，接收两个参数setup(props,context)。propsprops是响应式的，因为它是响应式的，所以不能用解构的方式去获取里面的数据，否则响应式会失效。错误演示如下：exportdefaultdefineComponent({setup(props,contxt){let{name}=propsconsole.log(name)//此时获取的name值已经不能响应name的变化valueinthecomponent}})context在setup中，我们无法访问vue2中可以获取组件数据的this对象，所以context提供了this对象最常用的三个属性attr，slot，emit对应vue2中的$attr（属性）、$slot（插槽）、$emit（发射事件），这几个属性自动同步最新的值，所以我们拿到的数据也是最新的。关于reactive、ref和toRefs在vue2中，我们在组件的data中定义data。在vue3中，我们可以使用reactive、ref来定义数据使用。reactive一般来说，当我们使用reactive定义数据时，我们定义的是对象或函数等引用类型。reactive不能代理基本数据类型的数据[string,number,boolean...]比如我创建一个属性a，值为test的对象：constobj=reactive({a:'test'})console.log(obj.a)//这里会输出testtoRefs。上面reactive定义的数据返回后，需要在label中使用将obj.a引入dom结构是很麻烦的，但是我们不能通过解构返回{...obj}，这样数据就会失去实时响应。在这种情况下，我们有如果想直接使用结构化数据，可以使用toRefs进行解构来保存操作（原因还没搞清楚，留个坑）constobj=reactive({count:1,price:20})//使用toRefs进行解构Returnreturn{...toRefs(obj)}//解构后的属性可以直接在标签中使用
quantity:{{count}},price:{{price}}
ref对应于reactive的，ref一般用来定义普通类型的数据，但是ref也可以定义对象类型的数据，ref定义数据如下（推荐使用ref定义数据）：letnum=ref(2)letstr=ref('hello')letobj=ref({name:zjh})console.log(num.value)//2console.log(str.value)//hello//注意这里allresponsive访问数据时，需要加上.value，标签中不需要console.log(obj.value.name)。//zjhVue3'slifecycleLifecycle这里需要注意的是，在vue3中，使用了setup而不是beforeCreate&created一个hook，但是在vue3项目中仍然可以使用beforeCreate&created，因为vue3会向后兼容，这样做相当于在vue3项目中写vue2代码，然后setup会比beforeCreate&created更早执行。vue2中beforeDistroy&destroyed钩子代表销毁。两个钩子换成了onBeforeUnmount&onUnmounted，代表卸载。Others在生命周期的关键字前加上on关键字。如果需要使用某个生命周期，需要从vue中导入：import{defineComponent,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered}from"vue"监控数据watch&watchEffectwatch监听数据变化是惰性的，只有在数据变化时才会触发相应的回调。watchwatch有三个参数watch(source,callback,[options])source：可以支持string,Object,Function,Array；用于指定要监听的数据源，你的响应变量。callback：监听触发后执行的回调函数，有两个参数（newV，oldV），获取到的新值和变化前变量的值（旧值）。选项：提供深度、即时和刷新的监控模式。optiondeep：当设置值为true时，可以监控嵌套的数据层，嵌套的对象数组...这里有一个坑，就是监控这么复杂的数据时，得到的新值和旧值是一样的，暂时不清楚原因，所以使用时要小心。immediate：释放watch的惰性状态，在组件创建时执行一次回调，其余表现与正常监听相同。flush：有待学习。这是一个示例：