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升级改动。欢迎各位大神关注《全栈技术圈》公众号，让技术更加简单易懂。