文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue2和vue3数据响应式原理分析及如何实现

2023-06-22 05:17

关注

今天就跟大家聊聊有关vue2和vue3数据响应式原理分析及如何实现,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

数据响应式

使用defineProperty

如何追踪变化

var obj = {}var age Object.defineProperty(obj, 'age', {    get: function() {        consoel.log('get age ...')        return age    },    set: function(val) {        console.log('set age ...')        age = val    }})obj.age =100 //set age ...console.log(obj.age)//get age ...

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

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

function defineReactive(data) {  if (!data || Object.prototype.toString.call(data) !== '[object Object]')    return;  for (let key in data) {    let val = data[key];    Object.defineProperty(data, key, {      enumerable: true, //可枚举      configurable: true, //可配置      get: function() {        track(data, key);        return val;      },      set: function() {        trigger(val, key);      },    });    if (typeof val === "object") {      defineReactive(val);    }  }}function trigger(val, key) {  console.log("sue set", val, key);}function track(val, key) {  console.log("sue set", val, key);}const data = {  name:'better',  firends:['1','2']}defineReactive(data)console.log(data.name)console.log(data.firends[1])console.log(data.firends[0])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数据响应式原理分析及如何实现

如何收集依赖

使用

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

该模板中使用数据 name, 我们要观察数据, 当数据的属性发生变化的时候, 可以通知哪些使用的地方,
这就是我们要先收集依赖,即把用到数据name的地方收集起来,然后等数据变化的时候,把之前收集好的依赖循环触发一遍,总结来说就是getter中收集依赖,在setter中触发依赖

使用proxy

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

const p = new Proxy(target, handler)

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

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

如何实现劫持

const dinner = {  meal:'111'}const handler = {  get(target, prop) {    console.log('get...', prop)    return Reflect.get(...arguments)  },  set(target, key, value) {    console.log('get...', prop)    console.log('set',key,value)    return Reflect.set(...arguments)  }}const proxy = new Proxy(dinner, handler)console.log(proxy.meal)console.log(proxy.meal)

代码中dinner 对象代理到handler上
defineProperty区别
defineProperty的属性需要遍历才能监管所有属性

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

用proxy实现一个模拟响应式

function reactive(obj) {  const handler = {    get(target, prop, receiver) {      track(target, prop);      const value =  Reflect.get(...arguments);      if(typeof value === 'Object') {        reactive(value)      }else {        return value      }    },    set(target,key, value, receiver) {      trigger(target,key, value);      return Reflect.set(...arguments);    },  };  return new Proxy(obj,handler)}function track(data, key) {  console.log("sue set", data, key);}function trigger(data, key,value) {  console.log("sue set", key,':',value);}const dinner = {  name:'haochi1'}const proxy  =reactive(dinner)proxy.nameproxy.list = []proxy.list.push(1)

执行后自动打印

vue2和vue3数据响应式原理分析及如何实现

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

赋值也需要先get

简单总结:

  1. vue2 (浅响应式)

  1. vue3 (深度响应式) :

两者的不同

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

看完上述内容,你们对vue2和vue3数据响应式原理分析及如何实现有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网行业资讯频道,感谢大家的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯