大家好，我是小编阿贤。欢送各位大神关注《全栈技术圈》公众号，让技术更加简略易懂。
1. vue2和vue3实例区别
1.1 创立一个vue2实例
在vue2外面的Vue是一个构造函数，通过该构造函数创立一个Vue实例，data选项能够是对象，也能够是办法返回一个对象。能够通过el选项指定一个挂载的容器，也能够通过$mount()办法指定挂载的容器。
new Vue({ 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.1 vue2的响应式
在addSex办法中后增加的属性是非响应式的。在delName办法中间接应用delete形式删除对象的属性后，不具备响应式。在addFood办法中操作数组后同时要具备响应式。举荐应用$set办法依据下标增加数组元素，确保新增加的元素同样具备响应式。在delFood办法中间接依据下标删除数组元素，不具备响应式。
new Vue({ el:'#app', data:{ student:{ name:'张三', age:20 }, foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌'] }, methods: { addSex(){ //增加性别 // this.student.sex='男' //能够通过$forceUpdate()强制页面更新一次 // this.$forceUpdate() //举荐应用$set办法给对象增加新的属性，确保新增加的属性同样具备响应式 this.$set(this.student,'sex','男') }, delName(){ //删除姓名 // 不具备响应式 // delete this.student.name //应用$delete办法，删除对象的属性后，持续具备响应式 this.$delete(this.student,'name') }, addFood(){ //增加食物 // 具备响应式，必须要应用上面的办法： // push pop unshift shift sort reverse splice // this.foods.push('佛跳墙') // this.foods[5] = '佛跳墙' // this.$forceUpdate() this.$set(this.foods,5,'佛跳墙') }, //删除食物 delFood(){ // this.foods.splice(3,1) //不具备响应式 // this.foods[3] = null //应用$delete办法，删除数组中指定地位的元素，持续具备响应式 this.$delete(this.foods,3) } }})2.2 vue3修复了vue2中响应式的所有缺点
vue3后续新增属性值具备响应式，delete本人删除属性也具备响应式。
Vue.createApp({ data() { return { student:{ name:'张三', age:20 }, foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌'] } }, methods: { addSex(){ this.student.sex = '男' }, delName(){ delete this.student.name }, addFood(){ this.foods[5] = '佛跳墙' }, delFood(){ delete this.foods[3] } }}).mount("#app")3 Vue2和Vue3的响应式原理
3.1 vue2的响应式原理
vue2在实例化时，会将data外面的所有数据采纳 Object.defineProperty 进行解决，实现实现响应式性能。然而你之后往data外面增加的数据，因为没有采纳 Object.defineProperty 进行解决，所以不具备响应式。$set()办法，外部就是对单个属性从新采纳 Object.defineProperty 进行解决，从而具备响应式。
//源对象let obj = { name:'张三', age:20, sex:'男'};document.querySelector('#name').innerHTML = obj.name;document.querySelector('#age').innerHTML = obj.age;document.querySelector('#sex').innerHTML = obj.sex;//定义一个obj2对象，作为obj的代理对象let obj2 = {};//通过Object.defineProperty办法，给obj2增加属性Object.defineProperty(obj2, 'name', { //读取属性的值，调用get办法 get(){ return obj.name; }, //设置属性的值，调用set办法 set(val){ obj.name = val; document.querySelector('#name').innerHTML = obj.name; }});Object.defineProperty(obj2, 'age', { //读取属性的值，调用get办法 get(){ return obj.age; }, //设置属性的值，调用set办法 set(val){ obj.age = val; document.querySelector('#age').innerHTML = obj.age; }});Object.defineProperty(obj2,'sex',{ //读取属性的值，调用get办法 get(){ return obj.sex }, //设置属性的值，调用set办法 set(val){ obj.sex = val document.querySelector('#sex').innerHTML = obj.sex }});3.2 vue3的响应式原理
应用new Proxy()创立一个代理对象，通过喷射对象从指定的对象身上发射出指定的属性值。
// 源对象let obj3 = { name:'张三', age:20, sex:'男'}document.querySelector('#name2').innerHTML = obj3.namedocument.querySelector('#age2').innerHTML = obj3.agedocument.querySelector('#sex2').innerHTML = obj3.sexlet obj4 = new Proxy(obj3, { //获取属性 get(target, property){ // 间接返回源对象身上的指定的属性值 // return target[property]; // 通过喷射对象从指定的对象身上发射出指定的属性值 return Reflect.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){ // return delete target[property]; document.querySelector(`#${property}2`).remove(); return Reflect.deleteProperty(target,property); }});4 Vue3新推出的组合式API
4.1 vue2中只能这样写代码，vue3也能够这样写
data() { return { carName:'保时捷', carPrice:'100W' }},methods: { updateCar(){ this.carName = '特斯拉' this.carPrice = '80W' }}4.2 vue3引入了全新的性能，组合式API
组合式api的作用是：将原来分散开来定义的数据，办法，计算属性，监听器，组合起来定义一个残缺的业务。
// ref用于定义响应式数据let {ref} = VueVue.createApp({ // setup是组合式api的舞台，所有的组合式api都要在setup外面应用 setup() { //定义汽车相干数据 // 应用ref()办法，定义一个响应式对象 let carName=ref('保时捷') let carPrice=ref('100W') //定义汽车相干办法 function updateCar(){ //批改对象的值，要通过value属性 carName.value = '特斯拉' carPrice.value = '80W' } return{ //返回汽车相干数据 carName, carPrice, updateCar, } })})总结：
Vue2降级Vue3带来更快的改变次要有两方面
1、vue3从新扫视了 vdom，更改了本身对于 vdom的比照算法。vdom从之前的每次更新，都进行一次残缺遍历比照，改为了切分区块树，来进行动静内容更新。也就是只更新 vdom的绑定了动态数据的局部，把速度进步了6倍；
2、 把 definePerproty改为了 proxy，对于 JavaScript引擎更加敌对，响应更加高效。
本篇文件先写到这后续咱们在深刻Vue3降级改变。欢送各位大神关注《全栈技术圈》公众号，让技术更加简略易懂。