vue3.0新增(vue项目新增页面)

Web前端面试高频考点——Vue3.x新API系列文章目录

内容参考链接JavaScript面试高频考点HTML、CSS、JavaScript、ES6、AJAX、HTTP面试测试网站Vue2.x高频面试测试网站Vue2.x高频面试测试网站Vue3.x有了新的API生命周期，理解并最好地利用ref、toRef和toRefsVue3的重要功能.x升级发出属性和生命周期，多个事件，Fragment，移出.async，异步组件编写，移出过滤器，Teleport，Suspense.Vue3.x响应式CompositionAPI的逻辑复用，Proxy来实现响应式Vue3。x深入理解v-model参数用法、watch和watchEffect的区别等。

文章目录

系列文章目录1、Vue3相对于Vue2有哪些优势？2.Vue2和Vue3生命周期的差异1.OptionsAPI生命周期2.CompositionAPI生命周期3.如何理解CompositionAPI和OptionsAPI1.CompositionAPI带来了什么2.CompositionAPI和Options之间如何选择API？3.如何选择4.不要误解CompositionAPI4.如何理解ref、toRef和toRefs1、ref2、ref扩展3.toRef4、toRefs5.ref的最佳使用方式、toRef和toRefs

一、Vue3比Vue2有什么优势？

更好的性能、更小的尺寸、更好的ts、支持更好的代码组织、更好的逻辑提取、更多新功能

二、Vue2和Vue3生命周期区别

App.vue父组件：

模板div生命周期：msg='msg'v-if='flag'/按钮@click='changeHandler'changemsg/button按钮@click='changeFlagHandler'changeflag/button/div/templatescriptimportLifeCyclesfrom'./components/LifeCycles.vue';导出默认{data(){return{msg:'hellovue3',flag:true,};},methods:{changeHandler(){this.msg='hellovue3'+Date.now();},changeFlagHandler(){this.flag=!this.flag;},},Components:{生命周期},};/script

1、OptionsAPI生命周期

LiftCycles.vue子组件：

以Vue2.x的形式，点击按钮更新并销毁组件templateplifecycle{{msg}}/p/templatescriptexportdefault{name:'LiftCycles',props:{msg:String,},beforeCreate(){console.log('beforeCreate');},创建(){console.log('创建');},beforeMount(){console.log('beforeMount');},挂载(){console.log('挂载');},beforeUpdate(){console.log('beforeUpdate');},更新(){console.log('更新');},beforeUnmount(){console.log('beforeUnmount');},卸载(){console.log('卸载');}，};/脚本

2、CompositionAPI生命周期

beforeDestroy改为beforeUnmountdestroyed改为unmounted遵循Vue2模板的其他生命周期p生命周期{{msg}}/p/templatescriptimport{onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,}from'vue';exportdefault{name:'LiftCycles',props:{msg:String,},//等于beforeCreate并创建setup(){console.log('setup');onBeforeMount(()={console.log('onBeforeMount');});onMounted(()={console.log('onMounted');});onBeforeUpdate(()={console.log('onBeforeUpdate');});onUpdated(()={console.log('onUpdated');});onBeforeUnmount(()={console.log('onBeforeUnmount');});onUnmounted(()={console.log('onUnmounted');});}，};/脚本

三、如何理解CompositionAPI和OptionsAPI

选项API与组合API：

1、CompositionAPI带来了什么

更好的代码组织，更好的逻辑复用，更好的类型推导

2、CompositionAPI和OptionsAPI如何选择？

不建议共享，很容易造成代码混乱。CompositionAPI用于复杂的业务情况。OptionsAPI用于简单业务场景

3、如何选择

否。建议乱用，会造成混乱。对于业务逻辑简单的小型项目，对于逻辑复杂的中型和大型项目使用OptionsAPI。使用组合API

4、别误解CompositionAPI

。CompositionAPI是一项高级技能，而不是一项基本技能。CompositionAPI旨在解决复杂的业务逻辑。CompositionAPI就像Hooks在React中的地位

四、如何理解ref、toRef和toRefs

1、ref

value类型生成的响应式数据可以用于响应式，也可以用于模板。使用.value修改所有ref变量的值。尽量使用xxxRef的格式进行命名，以便更容易区分Ref.vue组件。

ref用于定义响应式值类型。反应式用于定义响应式引用类型。ref定义的值类型可以直接在reactive和templates中使用。修改值时，使用.valuetemplateprefdemo{{ageRef}}{{state.name}}/p/templatescriptimport{ref,reactive}from'vue';exportdefault{name:'Ref',setup(){constageRef=参考(21);//值类型反应式constnameRef=ref('杂货店');const状态=反应性({name:nameRef,});setTimeout(()={console.log('ageRef',ageRef.value);ageRef.value=18;//.value修改值nameRef.value='前端杂货店';},1000);返回{ageRef,状态，};}，};/脚本

2、ref扩展

RefTemplate.vue组件

ref本身的意思是引用。无论你传递给它什么，它都会指向你传递给DOM的内容。当然，它指向DOM。templatepref='elemRef'我是一行text/p/templatescriptimport{ref,onMounted}from'vue';导出默认值{name:'RefTemplate',setup(){constelemRef=ref(null);onMounted(()={console.log('reftemplate',elemRef.value[xss_clean],elemRef.value);})return{elemRef,};}，};/脚本

3、toRef

为响应式对象的prop创建ref，并由响应式toRef.vue组件维护两者之间的引用关系。

toRef(object,'property')修改响应对象的属性。当ageRef改变时，state.age也会改变。当state.age改变时，ageRef也会改变模板。ptoRef演示-{{ageRef}}-{{state.name}}-{{state.age}}/p/templatescriptimport{reactive,toRef}from'@vue/reactivity';exportdefault{name:'ToRef',setup(){conststate=active({age:20,name:'杂货店',});//如果toRef用于普通对象，则输出结果无响应//conststate={//age:20,//name:'杂货店'//}//修改一个属性反应对象的(age)(reactive)constAgeRef=toRef(state,'age');setTimeout(()={state.age=25;},1000);setTimeout(()={ageRef.value=30;//使用.value修改值},2000);返回{状态，ageRef，}；}，};/脚本

4、toRefs

将响应式对象转换为普通对象。对象的每个prop都是一个对应的ref。两者维护着Refs组件的引用关系。

toRefs，将反应对象转换为普通对象。对象的每个属性都是对应的reftemplateptoRefsdemo{{ageRef}}{{nameRef}}/p/templatescriptimport{toRefs,reactive}from'vue';exportdefault{name:'ToRefs',setup(){conststate=反应;//将响应式对象转换为普通对象conststateAsRefs=toRefs(state);//每个属性都是一个ref对象const{Age:ageRef,name:nameRef}=stateAsRefs;setTimeout(()={state.age=25},1000)return{ageRef,nameRef,};}，};/脚本

或者这样写：

直接返回这个普通对象。注意此时模板内容也发生了变化。直接写入对象模板ptoRefsdemo中的属性{{name}}{{Age}}/p/templatescriptimport{toRefs,reactive}from'vue';exportdefault{name:'ToRefs',setup(){conststate=reactive({age:20,name:'杂货店',});//将响应式对象转为普通对象conststateAsRefs=toRefs(state);setTimeout((()={state.age=25},1000)returnstateAsRefs},};/script

五、ref、toRef和toRefs的最佳使用方式

当使用reactive作为响应对象，使用ref作为值类型时，响应设置中返回toRefs(state)，或者使用toRefs(state,'xxx')ref的变量命名返回响应时使用xxxRef合成函数的对象，使用toRefsxxx.js文件

定义从'vue'functionuseFeatureX()返回时要转换为重新导入的函数和响应对象{toRefs,Reactor}{conststate=Reactor({x:1,y:2})//逻辑运行状态，省略N行//Return当转换为ref时returntoRefs(state)}export默认useFeatureX

xxx.vue组件

使用时可以直接写入对象的属性。exportdefault{setup(){//您可以在不响应的情况下销毁结构const{x,y}=useFeatureX()return{x,y}}}

步数不积累，就无法到达千里。不积小流，就不能成江海。

如果本文对您有帮助，请支持蒂蒂三联+关注。高质量好文章正在产出中……