大家好，我是小编阿闲。欢迎大家关注《全栈技术圈》公众号，让技术更简单易懂。一、vue2和vue3实例的区别1.1创建vue2实例vue2中vue是一个构造函数，通过它创建一个Vue实例，data选项可以是一个对象，也可以是一个返回对象的方法。可以通过el选项指定挂载容器，也可以通过$mount()方法指定挂载容器。newVue({el:'#app',data:{name:'Vue2',age:'6'}}).$mount('#app')1.2创建一个vue3实例vue3中vue是一个对象，创建通过对象的createApp()方法创建一个Vue实例。vue3中取消了el选项。在vue3中，无论是组件还是vue实例，data选项必须是方法，方法返回对象。Vue.createApp({//el:'#app',data(){return{name:'Vue3',age:'2'}}}).mount('#app')2.Vue2和Vue3的响应类型区别2.1vue2的响应式在addSex方法后添加的属性是非响应式的。直接使用delName方法中的delete方法删除对象的属性后，没有响应。在addFood方法中对数组进行操作后，也必须是响应式的。推荐使用$set方法根据下标添加数组元素，保证新添加的元素也是响应式的。delFood方法中直接根据下标删除数组元素，没有响应式。newVue({el:'#app',data:{student:{name:'张三',age:20},foods:['鱼翅','松茸','鱼子酱','帝王蟹','Bearpaw']},methods:{addSex(){//添加性别//this.student.sex='male'//可以通过$forceUpdate()强制页面更新一次//this.$forceUpdate()//建议使用$set方法给对象添加新的属性，保证新添加的属性也有响应this.$set(this.student,'sex','male')},delName(){//删除名字//没有响应式风格//删除this.student.name//使用$delete方法删除对象的属性，继续有响应式风格this.$delete(this.student,'name')},addFood(){//添加食物//响应式，必须使用以下方法：//pushpopunshiftshiftsortreversesplice//this.foods.push('佛跳翻墙')//this.foods[5]='佛跳墙'//this.$forceUpdate()this.$set(this.foods,5,'佛跳墙')},//删除fooddelFood(){//this.foods.splice(3,1)//无响应//this.foods[3]=null//使用$delete方法删除数组中指定位置的元素，并继续有responsivethis.$delete(this.foods,3)}}})2.2vue3修复了vue2响应式风格的所有缺陷Vue3后续新增的属性值有响应式风格，delete自身删除的attributes也有响应式风格。vue.createApp({data(){return{student:{name:'张三',age:20},foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']}},methods:{addSex(){this.student.sex='Male'},delName(){deletethis.student.name},addFood(){this.foods[5]='佛跳过去thewall'},delFood(){deletethis.foods[3]}}}).mount("#app")3Vue2和Vue3的响应式原理3.1vue2的响应式原理Vue2在实例化的时候，所有的数据在data数据由Object.defineProperty处理，实现响应式功能。但是，你后面添加到data的数据是没有响应的，因为它不是由Object.defineProperty处理的。在内部，$set()方法重新使用Object.defineProperty来处理单个属性，因此它是响应式的。//源对象letobj={name:'张三',age:20,sex:'男'};document.querySelector('#name').innerHTML=obj.name;document.querySelector('#age').innerHTML=obj.age;document.querySelector('#sex').innerHTML=obj.sex;//定义一个obj2对象作为obj的代理对象letobj2={};//通过Object.defineProperty方法,给obj2添加属性Object.defineProperty(obj2,'name',{//读取属性的值，调用get方法get(){returnobj.name;},//设置属性的值，调用set方法set(val){obj.name=val;document.querySelector('#name').innerHTML=obj.name;}});Object.defineProperty(obj2,'age',{//读取值属性并调用get方法get(){returnobj.age;},//设置属性的值，调用set方法set(val){obj.age=val;document.querySelector('#age').innerHTML=obj.age;}});Object.defineProperty(obj2,'sex',{//读取属性值，调用get方法get(){returnobj.sex},//设置的价值属性，调用set方法set(val){obj.sex=valdocument.querySelector('#sex').innerHTML=obj.sex}});3.2vue3的响应式原理使用newProxy()创建代理对象，通过辐射对象属性值从指定对象发出指定对象。//源对象letobj3={name:'张三',age:20,sex:'male'}document.querySelector('#name2').innerHTML=obj3.namedocument.querySelector('#age2').innerHTML=obj3.agedocument.querySelector('#sex2').innerHTML=obj3.sexletobj4=newProxy(obj3,{//获取属性get(target,property){//直接返回源对象上的指定属性值//returntarget[property];//通过辐射对象从指定对象发射指定属性值returnReflect.get(target,property);},//设置属性set(target,property,value){//target[property]=value;Reflect.set(target,property,value);document.querySelector(`#${property}2`).innerHTML=Reflect.get(target,property);},//删除属性deleteProperty(target,property){//returndeletetarget[property];document.querySelector(`#${property}2`).remove();returnReflect.deleteProperty(target,property);}});4Vue3新推出的组合API4.1只能写代码在这个wavue2中的y，vue3也可以这样写数据。{return{car??Name:'Porsche',carPrice:'100W'}},methods:{updateCar(){this.carName='Tesla'this.carPrice='80W'}}4.2vue3引入了一个新功能，组合API组合API的作用是将原本分别定义的数据、方法、计算属性、监听器组合起来，定义一个完整的业务//ref用于定义响应式数据let{ref}=VueVue.createApp({//setup是组合api的阶段，所有组合api必须在setup中使用setup(){//定义汽车相关数据//使用ref()方法定义响应式对象letcarName=ref('Porsche')letcarPrice=ref('100W')//定义汽车相关方法functionupdateCar(){//修改对象的值，传递给valueattributecarName.value='Tesla'carPrice.value='80W'}return{//返回汽车相关数据carName,carPrice,updateCar,}})})总结：Vue2升级Vue3带来的更快主要有两个变化。1、Vue3重新审视了vdom，改变了自己对vdom的比较算法。从上次更新vdom开始，进行了完整的遍历比较，改为分裂块树进行动态内容更新。即只更新vdom中绑定动态数据的部分，速度提升6倍；2.将definePerproty改为proxy，对JavaScript引擎更友好，响应更高效。先写这篇文档，后面会深入Vue3升级变化。欢迎大家关注《全栈技术圈》公众号，让技术更简单易懂。
