面试官：Vue2和3有什么区别

面试官：Vue2和3有什么区别？前者是修改对象属性的权限标签，后者是整个对象的代理。在性能方面，代理会更好。diff算法，渲染算法的改变Vue3对diff算法进行了优化。没有像vue2那样比较所有的dom，而是采用块树的方式。此外，重新渲染算法也得到了改进，使用闭包进行缓存。这使得vue3比vue2快6倍。在这里创建数据是Vue2和Vue3最大的区别——Vue2使用选项类型API（OptionsAPI）相比Vue3组合API（CompositionAPI）。旧的option类型API在代码中划分了不同的属性（properties）：data，computedAttributes，methods等。新的syntheticAPI允许我们使用methods（function）来划分，相对于旧的API使用attributes来分组，所以代码会更简单、更清晰。不同于vue2组件的写法，我们在定义一个vue2组件时，更多的是通过一个对象来表达组件，像这样：而在vue3中，我们会通过方法的组合来完成组件的定义，像这样：、vue2exportdefault{props:{title:String},data(){return{username:'',password:''}}}相关vue实用视频讲解：进入学习Vue3使用以下三步创建响应式数据：来自Vue介绍reactive并使用reactive()方法将我们的数据声明为反应式数据使用setup()方法返回我们的反应式数据，以便我们的模板可以获取这些反应式数据import{reactive}from'vue'exportdefault{props:{title:String},setup(){conststate=reactive({username:'',password:''})return{state}}}创建模板组件，大部分代码在Vue2和Vue3中非常相似。Vue3支持片段（Fragments），也就是说组件可以有多个根节点。这个新功能可以减少许多组件之间的div包装元素。在开发vue的时候，我们会发现每个组件都会被一个div元素包裹起来。会有很多层冗余的div元素。碎片解决了这个问题。Vue3中唯一真正的区别是数据获取。Vue3中的ReactiveData包含在ReactiveState变量中。——所以我们需要访问这个反应状态来获取数据值。vue2vue3Vue2vs.Vue3的方法写Vue2的optionAPI将方法划分为单独的属性区域。我们可以直接在该属性中添加方法来处理各种前端逻辑。exportdefault{props:{title:String},data(){return{username:'',password:''}},methods:{login(){//登录方法}}}在Vue3的合成API中setup()方法也可用于操作方法。创建声明方法实际上与声明数据状态相同。—我们需要先声明一个方法，然后在setup()方法中返回（return），这样这个方法才能在我们的组件中被调用。exportdefault{props:{title:String},setup(){conststate=reactive({username:'',password:''})constlogin=()=>{//登录方法}return{login,state}}}LifecycleHooks——生命周期钩子在Vue2中，我们可以直接在组件属性中调用Vue的生命周期钩子。下面使用组件挂载的生命周期触发钩子。exportdefault{props:{title:String},data(){return{username:'',password:''}},mounted(){console.log('组件已挂载')},methods:{login(){//登录方法}}}现在Vue3的合成API中的setup()方法基本上可以包含所有内容。生命周期钩子就是其中之一！但是在Vue3中lifecyclehook是不可全局调用的，需要从vue中引入。就像刚才reactive的介绍一样，生命周期的挂载钩子调用onMounted。引入之后，我们就可以在setup()方法中使用onMountedhook了。import{reactive,onMounted}from'vue'exportdefault{props:{title:String},setup(){//..onMounted(()=>{console.log('Componentismounted')})//...}}ComputedProperties-ComputedProperties让我们尝试添加一个计算属性以将用户名转换为小写。在Vue2中实现，我们只需要在组件中的option属性中添加即可导出default{//..computed:{lowerCaseUsername(){returnthis.username.toLowerCase()}}}Vue3开发者设计模式我们介绍根据需要使用需要的依赖包。这样就不需要冗余引用导致性能或者打包后体积过大的问题。Vue2一直存在这个问题。所以要在Vue3中使用computed属性，首先需要在组件中引入computed。用法和reactivedata一样，给state增加一个computed属性：username:'',password:'',lowerCaseUsername:computed(()=>state.username.toLowerCase())})//...}ReceiveProps接收组件props参数传这块给我们带来了最大的区别在Vue2和Vue3之间。——这代表了vue3中与vue2完全不同的东西。在Vue2中，这表示当前组件，而不是特定属性。所以我们可以直接用这个来访问prop属性值。例如下面的例子，挂载完成后打印当前传入的组件的参数标题。mounted(){console.log('title:'+this.title)}但是在Vue3中，this不能直接获取组件中的props属性、emit事件（触发事件）等属性。但是新的setup()方法可以接收两个参数：props——不可变的组件参数context——Vue3暴露的属性（emit、slots、attrs），所以在Vue3中接收和使用props会变成这样：setup(props){//...onMounted(()=>{console.log('title:'+props.title)})//...}发送事件Vue2中的自定义事件非常简单，但在Vue3中，我们有更多的控制自由。例如，现在我们想在点击提交按钮时触发登录事件。在Vue2中我们会调用this.$emit并传入事件名称和参数对象。login(){this.$emit('login',{username:this.username,password:this.password})}但是在Vue3中，我们只是说this不再用vue2表示这个组件，所以我们换一种方式自定义事件是必需的。那我该怎么办？！??优?)?不用慌，setup()中第二个参数内容对象中有emit，和this.$emit是一样的。那么我们只需要在setup()接收到的第二个参数中使用decompositionobject方法取出emit，就可以在setup方法中随意使用了。然后我们在登录方法中编写登录事件：setup(props,{emit}){//...constlogin=()=>{emit('login',{username:state.username,password:state.password})}//...}vue2vue3