1
头图

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

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


全栈技术圈
236 声望9 粉丝

喜欢大前端开发,喜欢逛github、div、npmjs、sf、zhihu等网站。