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){
    // 直接返回源对象身上的指定的属性值
    // 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升级改动。欢迎各位大神关注《全栈技术圈》,让技术更加简单易懂。

关注全栈技术圈,全面提升技术。

本作品系原创。禁止转载,如需转载请通过简信或评论联系作者。
最后编辑于:2024-10-27 15:58:36
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
武昌库里写JAVA1 分钟前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
李白的粉6 小时前
基于springboot的在线教育系统
java·spring boot·毕业设计·课程设计·在线教育系统·源代码
小马爱打代码6 小时前
SpringBoot原生实现分布式MapReduce计算
spring boot·分布式·mapreduce
iuyou️6 小时前
Spring Boot知识点详解
java·spring boot·后端
一弓虽7 小时前
SpringBoot 学习
java·spring boot·后端·学习
ai大佬7 小时前
Java 开发玩转 MCP:从 Claude 自动化到 Spring AI Alibaba 生态整合
java·spring·自动化·api中转·apikey
我爱吃朱肉8 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
来自星星的猫教授8 小时前
spring,spring boot, spring cloud三者区别
spring boot·spring·spring cloud
Bling_10 小时前
请求参数、路径参数、查询参数、Spring MVC/FeignClient请求相关注解梳理
java·spring·spring cloud·mvc
乌夷10 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash