The optimization and difference of upgrading VUE2 to VUE3

Hello everyone, I'm Xiaobian Axian. Welcome everyone to pay attention to the official account of " Full Stack Technology Circle " to make the technology easier and easier to understand.

1. The difference between vue2 and vue3 instances

1.1 Create a vue2 instance

Vue in vue2 is a constructor through which a Vue instance is created. The data option can be an object or a method returning an object. A mounted container can be specified by the el option, or by the $mount() method.

 new Vue({
  el: '#app',
  data: {
    name: 'Vue2',
    age: '6'
  }
}).$mount('#app') 

1.2 Create a vue3 instance

In vue3, Vue is an object, and a Vue instance is created through the createApp() method of the object. In vue3, the el option is canceled. In vue3, whether it is a component or a vue instance, the data option must be a method that returns an object.

 Vue.createApp({
  //el: '#app',
  data() {
    return {
      name: 'Vue3',
        age: '2'
      }
  }
}).mount('#app')

2. Responsive difference between Vue2 and Vue3

2.1 Responsiveness of vue2

Properties added later in the addSex method are non-responsive. After the delete method is used to delete the properties of the object directly in the delName method, it is not responsive. Be reactive after manipulating the array in the addFood method. It is recommended to use the $set method to add array elements based on subscripts to ensure that the newly added elements are also responsive. In the delFood method, the array elements are deleted directly according to the subscript, which is not responsive.

 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 fixes all the defects of responsiveness in vue2

Vue3's subsequent new attribute values are responsive, and delete's own deletion of attributes is also responsive.

 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 Responsive principles of Vue2 and Vue3

3.1 The responsive principle of vue2

When vue2 is instantiated, it will use Object.defineProperty to process all the data in the data to realize the responsive function. But the data you add to the data later is not responsive because it is not processed by Object.defineProperty. The $set() method internally re-uses Object.defineProperty to process a single property, making it responsive.

 //源对象
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 The responsive principle of vue3

Use new Proxy() to create a proxy object, and emit the specified property value from the specified object by radiating the object.

 // 源对象
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's new composition API

4.1 You can only write code like this in vue2, and vue3 can also write like this

 data() {
  return {
    carName:'保时捷',
    carPrice:'100W'
  }
},
methods: {
  updateCar(){
    this.carName = '特斯拉'
    this.carPrice = '80W'
  }
}

4.2 vue3 introduces a brand new feature, a combined API

The role of the combined API is to combine the data, methods, computed properties, and listeners that were originally defined separately to define a complete business.

 // 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,
    }
  })
})

Summarize:

Vue2 upgrades Vue3 to bring faster changes mainly in two aspects
1. Vue3 re-examined vdom and changed its own comparison algorithm for vdom. From each previous update, vdom performed a complete traversal and comparison, and changed it to a segmented block tree for dynamic content update. That is, only the part of vdom bound with dynamic data is updated, which increases the speed by 6 times;
2. Change definePerproty to proxy, which is more friendly to JavaScript engine and more efficient in response.
This document is written first, and then we will be in-depth Vue3 upgrade changes. Welcome everyone to pay attention to the official account of " Full Stack Technology Circle " to make the technology easier and easier to understand.