【vue】关于vue2和vue3响应式原理的区别

Vue2通过object.defineProperty实现数据响应式,存在新增和删除属性非响应式、数组操作不全面等问题。Vue3采用Proxy和Reflect,能更全面地拦截和响应对象及数组的变化,提高性能,尤其是在处理深层嵌套对象时。
摘要由CSDN通过智能技术生成

我们都知道,在Vue2中的数据响应式原理存在许多缺陷。
例如无法对新增和直接删除的数据做到响应式,无法直接操作数组进行响应式处理等等。
而在Vue3中,作者很好的解决了这些缺陷,让我们来对比一下Vue2与Vue3对数据响应式处理的具体区别吧

Vue2数据响应式原理

vue2中的响应式是通过object.defineProperty遍历每一个属性(对于深层嵌套的对象则会进行递归处理)并为其添加上gettersetter方法用来来监听数据的读取与改变,也就是我们所说的数据劫持,然后结合观察者模式,也就是==发布者-订阅者模式(Dep-Watcher)==通知页面视图发生改变,从而实现数据的响应式原理,数据劫持的简单实现过程如下所示:

  const p = document.getElementsByTagName('p')[0];
  let data={
    name:'张三',
    age:19
  }
  const obs = new obServer(data);
  console.log(obs);
  
  function obServer(obj){
    let keys = Object.keys(obj);//获取对象的所有属性
    keys.forEach(k=>{//循环遍历每一个属性
      Object.defineProperty(this,k,{//为每一个属性进行劫持操作
        get(){
          return obj[k];
        },
        set(val){
          console.log('数据改变啦');
          obj[k]=val
        }
      })
    })
  }

1.页面是如何更新的?

我们得了解一下什么是监听器,订阅器和订阅者。

  • 监听器 Observer ,用来劫持并监听所有属性,如果属性发生变化,就通知订阅者;
  • 订阅器 Dep,用来收集订阅者,对监听器 Observer 和 订阅者 Watcher 进行统一管理;
  • 订阅者 Watcher,可以收到属性的变化通知并执行相应的方法,从而更新视图;

首先在我们为每个监听属性添加上gettersetter方法进行收集依赖和触发依赖,然后通过创建一个Dep实例对监听器Observer和订阅者Watcher进行统一管理。当属性被发生更改时,调用setter方法进行派发更新,通知订阅者Watcher告诉它进行页面更新。

2.Vue2响应式存在的缺陷

一、新增加的属性和删除属性没有响应式

由于该版本的Vue会在初始化实例时就对data里面的属性进行getter/setter 转化,且由于只有get()、set() 方式,所以只能捕获到属性读取和修改操作,当 新增、删除属性时,捕获不到,导致界面也不会更新。
处理办法:
在vue2中引入了两个API用于对新增属性,删除属性的响应式处理,分别是$set$delete,详细操作如下代码所示:

<script>
	export default {
		data() {
			return {
				obj: {
					name: '张三'age: 16
				}
			}
		},
		methods: {
			// 添加属性
			// 当我们这样新增属性时,界面是不会有变化的
			addSex1() {
				this.obj.sex = '男'
			}
			
			// 我们要这么去添加属性,页面才会有变化
			addSex2(){
				this.$set(this.obj, 'sex', '男')
			}
			
			//同理,删除属性,当我们这样删除属性时,界面是不会有变化的
			deleteName1() {
				delete this.obj.name
			}
			// 我们要这么去删除属性,页面才会有变化
			deleteName2(){
				this.$delete(this.obj, 'name')
			}
		}
	}
</script>

二、数组的部分操作没有响应式

在Vue2当中,是没有办法直接操作数组下标来实现数组的响应式的,之所以这样是因为直接对数组进行property操作代价太高,一般来说我们对数组的操作都是增加删除,参考对象的增加删除可以看到代价太大,且一般数组的键值对数量比较庞大,这也导致了直接操作数组下标付出的性能代价太高,所以作者是通过重写了7个常用的数组方法,我们需要通过调用这些方法来对数组的响应式进行实现,具体的数组方法如下所示:

  1. array.pop()
  2. array.push()
  3. array.shift()
  4. array.unshift()
  5. array.sort()
  6. arry.reverse()
  7. array.splice()
    只有通过以上的7种方法对数组进行增删改才能实现数据的响应式,若是直接通过下标来修改,则没有响应式,如下代码所示
fn1() {
    this.arr[0] = 100
}

解决办法

fn1 () {
    // 方法1: splice方法
    this.arr.splice(0,1,100)
},
fn2 () {
    // 方法2: $set
    this.$set(this.arr, "0", 100)
}

三、对于深层嵌套的对象属性有着性能上的问题。

由于Vue2是通过object.defineProperty来对数据进行响应式处理,当我们需要监测深层对象属性时,我们需要通过层层递归的操作遍历所有属性对其进行设置响应式,这也导致了每次进行数据响应式处理将会花费很高的代价。因此,Vue3的通过proxy很好的解决了这一问题。

Vue3数据响应式原理

在Vue3当中,对于基本数据类型,还是依赖于了Vue2中的object.defineProperty操作,而对于对象和数组操作,Vue3采用了es6的proxy结合reflect对数据拦截进行响应式处理。
通过Proxy(代理): 拦截对象中任意属性的变化,包括:属性值的读写,属性的增加,属性的删除等。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等,这是Object.defineProperty不具备的
在这里插入图片描述
通过Reflect(反射): 对源对象的属性进行操作proxy是es6版本出现的一种对对象的操作方式。

Vue3对象数组响应式的基本实现思路:通过 new Proxy 代理了 obj 对象,然后通过 get、set、deleteProperty 函数代理了对象的读取、修改和删除操作,从而实现了响应式的功能。

  const p = new proxy(person, {
    // 有人读取p 身上的某个属性
    get(target, propName) {
      console.log(`有人读取了p身上的${propName}属性`, 更新界面);
      return Reflect.get(target, propName)   //return 出去一个返回值
    }, 
    // 给p对象身上增加/ 修改某个属性时调用
    set(target, propName, value) {
      console.log(`有人修改/增加了p身上的${propName}属性`, 更新界面);
      Reflect.set(target, propName, value)
    },
 
    deleteproperty(target, propName) {
      console.log(`有人删除了p身上的${propName}属性`, 更新界面);
      return Reflect.deleteProperty(target, value)    // 删除一个属性
    }
  })

Vue3只有在getter时才对对象的下一层进行劫持,真正访问到的内部对象才会变成响应式,大大优化了性能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

打代码能当饭吃?

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值