vue2&vue3数据响应式原理分析及手动实现(实例详解)

 5104

本篇文章给大家带来了vue2&vue3数据响应式原理分析及手动实现的相关知识,数据响应式视图跟数据是自动更新的,数据更新的时候视图是自动的更新的追踪数据的变化,希望对大家有帮助。


vue2&vue3数据响应式原理分析及手动实现(实例详解)


数据响应式

视图跟数据是自动更新的,数据更新的时候视图是自动的更新的

追踪数据的变化,在读取数据或者设置数据的时候能够做一些劫持的一些操作

vue2 使用defineProperty

vue3 改用Proxy


使用defineProperty

如何追踪变化

  1. var obj = {}var age 
  2. Object.defineProperty(obj, 'age', {
  3.     get: function() {
  4.         consoel.log('get age ...')
  5.         return age
  6.     },
  7.     set: function(val) {
  8.         console.log('set age ...')
  9.         age = val
  10.     }
  11. })
  12. obj.age =100 //set age ...
  13. console.log(obj.age) //get age ...

对象obj在取age属性的时候会调用数据劫持的get方法

在给age属性赋值的时候会调用set方法

那怎么使用Object.defineProperty实现一个数据响应式呢

  1. function defineReactive(data) {
  2.   if (!data || Object.prototype.toString.call(data) !== '[object Object]')
  3.     return;
  4.   for (let key in data) {
  5.     let val = data[key];
  6.     Object.defineProperty(data, key, {
  7.       enumerable: true, //可枚举
  8.       configurable: true, //可配置
  9.       get: function() {
  10.         track(data, key);
  11.         return val;
  12.       },
  13.       set: function() {
  14.         trigger(val, key);
  15.       },
  16.     });
  17.     if (typeof val === "object") {
  18.       defineReactive(val);
  19.     }
  20.   }
  21. }
  22. function trigger(val, key) {
  23.   console.log("sue set", val, key);
  24. }
  25. function track(val, key) {
  26.   console.log("sue set", val, key);
  27. }
  28. const data = {
  29.   name:'better',
  30.   firends:['1','2']
  31. }
  32. defineReactive(data)
  33. console.log(data.name)
  34. console.log(data.firends[1])
  35. console.log(data.firends[0])
  36. console.log(Object.prototype.toString.call(data))

这个函数defineReactve用来对Object.defineProperty进行封装,从函数名可以看出,起作用就是定义一个响应式数据,封装后只需要传递data,key和val就行

每当从data中读取key的时候触发track函数,往data的key中设置数据时,set函数中的trigger函数触发

数组的响应式

我们通过Array原型上的方法来改变数组的内容不会触发getter和setter

整理发现Array原型中可以改变数组自身内容的方法有7个,分别push pop shift unshift splice sort reverse

vue2 改写了这这7种方法

实现方式:

以Array.propertype为原型创建一个arrayMethods对象,再使用Object.setPropertypeOf(o, arryMethods)将o的__proto__指向arrayMethods


vue2&vue3数据响应式原理分析及手动实现(实例详解)

如何收集依赖

使用

  1. <template><p>{{name}}</p></template>

该模板中使用数据 name, 我们要观察数据, 当数据的属性发生变化的时候, 可以通知哪些使用的地方

这就是我们要先收集依赖,即把用到数据name的地方收集起来,然后等数据变化的时候,把之前收集好的依赖循环触发一遍,总结来说就是getter中收集依赖,在setter中触发依赖

使用proxy

Proxy对象用于创建一个对象的代理, 从而实现基本操作的拦截和定义(如属性查找、赋值、枚举、函数掉用等)

  1. const p = new Proxy(target, handler)

target

要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。

handler

一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

reflect是一个内置对象, 他提供拦截javascript操作的方法, 这些方法和Proxy handlers相同

Reflect.set将值分配给属性的函数。返回一个Boolean 如果更新成功则返回true

Reflect.get获取对象身上某个属性的值,类似target[name]

如何实现劫持

  1. const dinner = {
  2.   meal:'111'
  3. }
  4. const handler = {
  5.   get(target, prop) {
  6.     console.log('get...', prop)
  7.     return Reflect.get(...arguments)
  8.   },
  9.   set(target, key, value) {
  10.     console.log('get...', prop)
  11.     console.log('set',key,value)
  12.     return Reflect.set(...arguments)
  13.   }
  14. }
  15. const proxy = new Proxy(dinner, handler)
  16. console.log(proxy.meal)
  17. console.log(proxy.meal)

代码中dinner 对象代理到handler上

defineProperty区别

defineProperty的属性需要遍历才能监管所有属性

使用proxy可以将对象所有属性进行代理

用proxy实现一个模拟响应式

  1. function reactive(obj) {
  2.   const handler = {
  3.     get(target, prop, receiver) {
  4.       track(target, prop);
  5.       const value =  Reflect.get(...arguments);
  6.       if (typeof value === 'Object') {
  7.         reactive(value)
  8.       } else {
  9.         return value
  10.       }
  11.     },
  12.     set(target,key, value, receiver) {
  13.       trigger(target,key, value);
  14.       return Reflect.set(...arguments);
  15.     },
  16.   };
  17.   return new Proxy(obj,handler)
  18. }
  19. function track(data, key) {
  20.   console.log("sue set", data, key);
  21. }
  22. function trigger(data, key,value) {
  23.   console.log("sue set", key,':',value);
  24. }
  25. const dinner = {
  26.   name:'haochi1'
  27. }
  28. const proxy  = reactive(dinner)proxy.name
  29. proxy.list = []proxy.list.push(1)

执行后自动打印


vue2&vue3数据响应式原理分析及手动实现(实例详解)


思考:为啥只在get中使用递归,set不使用呢?

赋值也需要先get


简单总结:

1、vue2 (浅响应式)

遍历data,使用defineProperty拦截所有属性

当用户操作视图,会触发set拦截器

set先改变当前数据, 再通知wartch, 让watch去通知视图更新

视图重绘, 再次从get中获取对应的数据

2、vue3 (深度响应式) :

使用proxy 进行代理;拦截data任意属性的任意操作(13种), 包括属性的读写, 属性的添加, 属性的删除等等

使用Reflect进行反射; 动态对被代理的对象的相应属性进行特定的操作

代理对象(proxy)的反射对象(reflect)必须相互配合才能实现响应式

两者的不同

Proxy能劫持整个对象,而Object.defineProperty只能劫持对象的属性; 前者递归返回属性对应的值的代理即可实现响应式,后者需要深度遍历每个属性,后者对数组的操作很不友好。


TAG标签:
本文网址:https://www.zztuku.com/detail-10524.html
站长图库 - vue2&vue3数据响应式原理分析及手动实现(实例详解)
申明:本文转载于《CSDN》,如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐