关于vue3:VUE2升级成VUE3的优化与区别

大家好，我是小编阿贤。欢送各位大神关注《全栈技术圈》公众号，让技术更加简略易懂。

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.name
document.querySelector('#age2').innerHTML = obj3.age
document.querySelector('#sex2').innerHTML = obj3.sex
let obj4 = new Proxy(obj3, {
  // 获取属性
  get(target, property){![](/img/bVc2u2e)
    // 间接返回源对象身上的指定的属性值
    // 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} = Vue
Vue.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 降级改变。欢送各位大神关注《全栈技术圈》公众号，让技术更加简略易懂。