vue3一些不兼容的小改动生命周期选项名的变化destroyed改名为unmountedbeforeDestroy改名为beforeUnmount在prop的默认函数中访问this生成prop默认值的factory函数不能再访问this//vue3//将组件接收到的原始prop作为参数传递给默认函数//injectAPI可以在默认函数中使用import{inject}from'vue'exportdefault{props:{theme:{default(props){//props是传递给组件的原始值//在任何类型/默认转换之前//也可以使用inject来访问注入的属性returninject('theme','default-theme')}}}}自定义指令API更改为与组件生命周期一致指令的钩子函数已重命名在2.x中，自定义指令是使用vamp列出的狗创建的，这些钩子是可选的bind-在指令绑定到元素后发生，仅onceinserted-元素插入父DOM后发生指令被移除，只调用一次background=binding.value}})//在此元素的初始设置中，指令通过传递一个值来绑定样式，该值可以由应用程序在3中更新为不同的值。在x中，有一个新的API用于自定义指令，现在组件生命周期和自定义指令的生命周期统一创建-新！在应用元素的属性或事件侦听器之前调用。bind→beforeMountinserted→mountedbefore更新：新！这是在元素本身更新之前调用的，很像组件生命周期挂钩。更新→删除！update有太多相似之处，所以这个是多余的，使用updatedcomponentUpdated→updatedbeforeUnmount:new！类似于组件生命周期钩子，它会在元素卸载之前被调用。解除绑定->卸载//FinalAPIconstMyDirective={beforeMount(el,binding,vnode,prevVnode){},mounted(){},beforeUpdate(){},updated(){},beforeUnmount(){},unmounted(){}}//使用方法constapp=Vue.createApp({})app.directive('highlight',{beforeMount(el,binding,vnode){el.style.background=binding.value}})访问componentsInstancechange//vue2通过vnode访问组件实例bind(el,binding,vnode){constvm=vnode.context}//vue3通过binding访问mounted(el,binding,vnode){constvm=binding.instance}//有了片段支持，组件可能有多个根节点。当应用于多个根组件时，指令将被忽略并记录警告。Data选项始终是一个函数，mixin合并数据更改。data选项只支持function//2.xdata:{apiKey:'value'}//ordata(){return{apiKey:'value'}}//3.x现在只支持functionformdatadata(){return{apiKey:'value'}}Mixin合并行为在组件的data()和它的mixin或extends基类被合并时发生变化，const现在将被浅合并Mixin={data(){return{user:{name:'Jack',id:1}}}}constCompA={mixins:[Mixin]data(){return{user:{id:2}}}}上面的代码在不同版本的vue中有不同的结果//2.x{user:{id:2,name:'Jack'}}//3.x{user:{id:2}}transitionclassnamechangetransitionclassnamev-enter改为v-enter-from的过渡类名v-leave改为v-leave-form在v2.1.8版本中，引入v-enter-to来定义进入或离开过渡之间的过渡动??画帧插入，为了向后兼容，没有改变v-输入班级名称。这样做会带来很多混乱，比如enter和leave含义太宽泛，不遵循类名hooks的命名约定。为了在vue3中更加清晰易读，现在将这些初始状态重命名为/*2.x*/.v-enter,.v-leave-to{opcity:0;}.v-leave,.v-enter-至{opcity:1;}/*3.x*/.v-enter-from,.v-leave-to{opcity:0;}.v-leave-from,.v-enter-to{opcity:0;
