Vue3有哪些值得学习的知识点？

众所周知，前端技术更新换代非常快。并不是vue3存在了这么久。今天给大家分享一下vue3中值得注意的知识点。1、createAppvue2和vue3在创建实例的时候有很大的区别。具体对比如下：//Vue2Vue.use({router,store,render:h=>h(App)}).$mount("#app")//Vue3createApp(App).use(router)。use(store).mount("#app")Vue2使用newVue()创建一个实例。对应的router和store是参数的一部分。在vue3中，createApp用于创建应用实例，router和store通过链式调用作为插件。在vue2中，如果创建多个实例，如果有mixins、prototype等，很容易造成实例污染。createApp方法创建了一个全新的实例，可以有效避免这个问题。所以在vue3中，可以任意创建多个实例。2.在setupvue2中，采用基于选项的开发，而vue3采用基于组合的开发，也可以向下兼容基于选项的开发。setup函数是vue3中CompositionAPI的入口点。它介于生命周期钩子函数beforeCreate和created之间，因此无法在外部使用设置中的属性和方法。如果需要，必须返回暴露。比较vue2和vue3中data和method的区别：//vue2exportdefault{data(){return{name:"爱前端的小姐姐"},methods:{print(){console.log("print")}}}}//vue3exportdefault{setup(){constname="爱前端的小姐姐"functionprint(){console.log("print")}return{name,print}}}在vue2中，这是我们的常客，随处可见。我们在setup中加入了这个的打印，尝试查看结果，发现运行结果是undefined。所以这个和安装相关的东西不能在设置中使用。所以setup函数提供了两个参数：setup(props,context){//props是响应式数据，不能直接解构赋值//context非响应式对象，可以直接使用//Attribute(非响应式对象)解构console.log(context.attrs)//slot(无响应对象)console.log(context.slots)//触发事件(method)console.log(context.emit)}3.脚本设置语法糖简化了上面setup组合API的写法属于vue3的新语法糖。特点：定义的属性和方法可以直接使用，无需返回。自动注册组件，不再需要在组件中注册组件。大大简化了上面setup()的代码。4、hook函数vue2使用生命周期函数时，直接使用即可。如：//vue2exportdefault{beforeCreate(){},mounted(){}}但是在vue3组合API中，是通过在生命周期钩子前面加上on来访问的，必须在使用前引入。如：//vue3由于setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要这两个insetuphook函数，其余同理。官方提供了生命周期钩子：5.teleportportalteleportportal可以将内部元素绑定到任意父元素，使用方法简单灵活。使用方法：to属性是指定teleport中内容的DOM元素，可以是标签名、类名或id。//标签名。上面的示例使用标记名称添加到body元素。//类名。如：to=".className"//idname优点：当多个组件的嵌套层次过多时，样式层次处理麻烦，用teleport可以把元素剥离出来，设置样式方便，用vue控制状态也方便。6、将mixin混合成一个mixin对象，将多个组件的公共选项提取出来，导入到需要的组件中，方便管理。mixins在vue3中用的比较少。用法：使用时可以引入多个mixin对象。使用注意事项：当mixin对象和组件包含相同的选项时，它们将自动合并。当mixin对象和组件在同一个选项中有相同的属性时，就近原则会优先继承实例中的值。当mixin和component包含相同的hook函数时，会合并执行，先执行mixin中的hook函数。当mixin自定义属性与实例冲突时，可以通过optionMergeStrategies定义优先级。7.自定义指令全局自定义指令：vue2的指令挂载在Vue对象上。vue3的directive挂载在app上，如：//Vue2Vue.directive('name',opt)//Vue3constapp=createApp(App)app.directive("name",options)app.mount("#app")本地自定义说明：同vue2。在vue3中，对自定义指令生命周期钩子函数做了一些改动。钩子函数有：createdbeforeMountedmountedbeforeUpdateupdatedbeforeUnmountedunmounted8、ref、reactiveref用于使基本类型数据响应。reactive使引用数据类型具有反应性。ref和reactive包裹数据使数据具有响应性，需要在使用前引入。使用方法如：setup+ref+reactive可以实现在vue2data的响应式功能，所以setup可以代替data。9.toRefs和toReftoRefs解构props传递的数据。由于父组件通过props传值给子组件是响应式的，使用ES6解构会消除响应式特性，所以使用了toRefs。toRef也是解构数据，主要是处理可选参数，运行时检查是否属性存在于解构后的数据中，存在则继承，不存在则创建属性，这样就不会报错。conststr=toRef(props,'str')10、watch、watchEffect新用法watch、watchEffect都是监听器。watch会监听某种基本类型的数据或引用数据类型的特定属性。在vue3使用watch之前，必须介绍一下。//vue2watch:{mood(curVal,preVal){console.log('cur',curVal);//最新值console.log('pre',preVal);//修改之前的值}}//vue3import{watch}from"vue"watch(name,(curVal,preVal)=>{//businessprocessing},options)watchEffect监听引用数据类型的所有属性，不需要指定具体是哪个属性，一旦运行，它将立即执行。watchEffect也必须在使用前导入。import{watchEffect}from"vue"letobj=reactive({name:'qq',sex:'female'})watchEffect(()=>{console.log('name',obj.name);console.log('sex',obj.sex);})watchvs.watchEffect：watch运行时不会立即执行，而watchEffect会立即执行。watch比较具体，需要指定谁在监听，watchEffect不需要具体实现监听，直接在回调函数中使用即可，比较抽象。watch回调中可以访问修改前的值，watchEffect只能访问最新的值。Watch可以配置为实现watchEffect的前两个功能。11.computed的新用法computed属性选项API对vue2和vue3使用相同。在复合API中，需要在使用前引入。//Optionalcomputed:{sum(){returnthis.num1+this.num2}}//组合import{ref,computed}from"vue"exportdefault{setup(){constnum1=ref(1)constnum2=ref(1)letsum=computed(()=>{returnnum1.value+num2.value})}}或者，它可以使用具有get和set函数的对象来创建可写对象。letmul=computed({get:()=>{returnnum1.value*10},set:(value)=>{returnnum1.value=value/10}})在vue3.2+中，computed可以接受一个带有onTrack的Object和onTrigger选项作为第二个参数：当响应式属性或ref作为依赖项被跟踪时，将调用onTrack。onTrigger将在侦听器回调由依赖项的修改触发时被调用。12.provide/injectprovide/inject类似于消息的订阅和发布，provide提供或发送数据或方法，inject接收数据或方法。优点：组件嵌套层次多。当一个父组件给子组件和多个孙组件传值时，数据需要一次一级向下传递，比较繁琐。使用project和inject可以轻松解决这个问题。//vue2exportdefault{provide:{info:"Providedata"}}//接收数据exportdefault{inject:['info'],mounted(){console.log("Receivedata:",this.info)//接收数据：提供数据}}//vue3//接收数据13.readonlyreadonly只读函数，使用后数据只能使用不能修改，修改时会有警告。父子组件之间传值时，如果传递的是响应式数据，子组件修改时，父组件也会更新，容易造成状态混乱，不符合vue的单一数据流.如果使用readonly，请确保数据只能在其他组件中使用，不能修改，以免混淆。14.获取真实DOMvue2使用$ref获取真实DOM。Vue3使用ref来获取真实的DOM。与上面的参考不同。获取真实DOM