Vue2和Vue3在响应式上有什么区别?简单对比

2022年7月6日 41点热度 0人点赞

Vue2和Vue3在响应式上有什么区别?下面本篇文章就来给大家介绍一下Vue2和Vue3响应式区别,希望对大家有所帮助!

Vue2和Vue3在响应式上有什么区别?简单对比插图

第一次得先知道响应式原理过程,才能往下继续深入:由浅到深,才是王道。(学习视频分享:)

1.png

这种图片很清晰的描述出响应式原理:每个组件都会生成一个render函数(渲染函数),而render函数又会生成一个vnode(虚拟DOM),当执行render函数的时候会触发data里面getter,触发的时候产生依赖(在data触发到哪个数据的变量,就会将哪个变量观察起来)后面需要查看这个变量是否是之前依赖而被观察起来的,如果是会触发setter进行数据修改,如果不是,会直接进行监听操作。如果确定是之前作为依赖被重新观察起来的,那就执行 re-render 重新渲染操作,并且进行pacth操作。使用响应式原理能达到更好的数据渲染作用。

Vue2.x的响应式

Vue2中通过 Object.defineProperty 实现数据劫持,使得数据实现响应式更新。Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

Object.defineProperty(obj, prop, descriptor)

  • obj:要定义属性的对象。
  • prop:要定义或修改的属性的名称或 Symbol 。
  • descriptor:要定义或修改的属性描述符。

返回值:被传递给函数的对象。

响应实现

对象类型

通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

数组类型

通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹)。

let person = {   // 模拟Vue2实现响应式
	name:'亮哥',
	age:18   
}
 Object.defineProperty(person, "age", {
 // 当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除,解决新增/删除属性,数据无响应问题
 configurable: true, 
 get: () => { 
 // 收集依赖代码...
   return person.age;
 },
 set: (newVal) => { // 一个给属性提供 setter 的方法
   // 当属性值发生变化时我们可以进行额外操作 如调用监听器
   person.age = newVal;
   // 通知更新视图代码...
 },
   });   
 data.age = 25 // 触发set方法
  • 存在问题
    • 递归遍历数据对象属性,消耗大
    • 新增/删除属性,数据无响应;需要额外方法实现(Vue.set/Vue.delete、this.
      set/

99君

这个人很懒,什么都没留下