位置: IT常识 - 正文

模拟Vue实现响应式数据(vue实现响应式的原理)

编辑:rootadmin
1. 预期效果 当数据变动时,触发自定义的回调函数。 2. 思路 对对象 object 的 setter 进行设置,使 setter 在赋值之后执行回调函数 callback()。 3.细节 3.1 设置 setter 和 getter JS提供了 1. 预期效果

推荐整理分享模拟Vue实现响应式数据(vue实现响应式的原理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue怎么做响应式,vue 响应,vue如何实现响应式,vue如何实现响应式,vue2.0响应式原理,vue怎么写响应式布局,vue3.0响应式原理,vue怎么写响应式布局,内容如对您有帮助,希望把文章链接给更多的朋友!

当数据变动时,触发自定义的回调函数。

2. 思路

对对象 object 的 setter 进行设置,使 setter 在赋值之后执行回调函数 callback()。

3.细节3.1 设置 setter 和 getter

JS提供了 [Object.defineProperty()](Object.defineProperty() - JavaScript | MDN (mozilla.org)) 这个API来定义对象属性的设置,这些设置就包括了 getter 和 setter。注意,在这些属性中,如果一个描述符同时拥有 value 或 writable 和 get 或 set 键,则会产生一个异常。

Object.defineProperty(obj, "key", { enumerable: false, // 是否可枚举 configurable: false, // 是否可配置 writable: false, // 是否可写 value: "static"});

我们可以利用JS的 [闭包](闭包 - JavaScript | MDN (mozilla.org)),给 getter 和 setter 创造一个共同的环境,来保存和操作数据 value 和 callback 。同时,还可以在 setter 中检测值的变化。

// task1.jsconst defineReactive = function(data, key, value, cb) { Object.defineProperty(data, key, { enumerable: true, configurable: true, get() { console.log('getter') return value }, set(newValue) { if (newValue !== value) { value = newValue console.log('setter: value change') cb(newValue) } } });}const task = function() { console.log('running task 1...') const obj = {} const callback = function(newVal) { console.log('callback: new value is ' + newVal) } defineReactive(obj, 'a', 1, callback) console.log(obj.a) obj.a = 2 obj.a = 3 obj.a = 4}task()

至此我们监控了 value ,可以感知到它的变化并执行回调函数。

模拟Vue实现响应式数据(vue实现响应式的原理)

3.2 递归监听对象的值

上面的 defineRective() 在 value 为对象的时候,当修改深层键值,则无法响应到。因此通过循环递归的方法来对每一个键值赋予响应式。这里可以通过 observe() 和 Observer 类来实现这种递归:

// observe.jsimport { Observer } from "./Observer.js"// 为数据添加响应式特性export default function(value) { console.log('type of obj: ', typeof value) if (typeof value !== 'object') { // typeof 数组 = object return } if (typeof value.__ob__ !== 'undefined') { return value.__ob__ } return new Observer(value)}// Observer.jsimport { defineReactive } from './defineReactive.js'import { def } from './util.js';export class Observer { constructor(obj) { // 注意设置成不可枚举,不然会在walk()中循环调用 def(obj, '__ob__', this, false) this.walk(obj) } walk(obj) { for (const key in obj) { defineReactive(obj, key) } }}

在这里包装了一个 def() 函数,用于配置对象属性,把 __ob__ 属性设置成不可枚举,因为 __ob__ 类型指向自身,设置成不可枚举可以放置遍历对象时死循环

// util.jsexport const def = function(obj, key, value, enumerable) { Object.defineProperty(obj, key, { value, enumerable, writable: true, configurable: true })}3.3 检测数组

从需求出发,对于响应式,我们对数组和对象的要求不同,对于对象,我们一般要求检测其成员的修改;对于数组,不仅要检测元素的修改,还要检测其增删(比如网页中的表格)

对由于数组没有 key ,所以不能通过 defineReactive() 来设置响应式,同时为了满足响应数组的增删改,所以 Vue 的方法是,通过包装 Array 的方法来实现响应式,当调用 push()、poll()、splice() 等方法时,会执行自己设置的响应式方法

使用 Object.create(obj) 方法可以 obj 对象为原型(prototype)创建一个对象,因此我们可以以数组原型 Array.prototype 为原型创建一个新的数组对象,在这个对象中响应式包装原来的 push()、pop()、splice()等数组

// array.jsimport { def } from "./util.js"export const arrayMethods = Object.create(Array.prototype)const methodNameNeedChange = [ 'pop', 'push', 'splice', 'shift', 'unshift', 'sort', 'reverse']methodNameNeedChange.forEach(methodName => { const original = Array.prototype[methodName] def(arrayMethods, methodName, function() { // 响应式处理 console.log('call ' + methodName) const res = original.apply(this, arguments) const args = [...arguments] let inserted = [] const ob = this.__ob__ switch (methodName) { case 'push': case 'unshift': inserted = args case 'splice': inserted = args.slice(2) } ob.observeArray(inserted) return res })})// Observer.jsimport { arrayMethods } from './array.js'import { defineReactive } from './defineReactive.js'import observe from './observe.js'import { def } from './util.js'export class Observer { constructor(obj) { console.log('Observer', obj) // 注意设置成不可枚举,不然会在walk()中循环调用 def(obj, '__ob__', this, false) if (Array.isArray(obj)) { // 将数组方法设置为响应式 Object.setPrototypeOf(obj, arrayMethods) this.observeArray(obj) } else { this.walk(obj) } } // 遍历对象成员并设置为响应式 walk(obj) { for (const key in obj) { defineReactive(obj, key) } } // 遍历数组成员并设置为响应式 observeArray(arr) { for (let i = 0, l = arr.length; i < l; i++) { observe(arr[i]) } }}3.5 Watcher 和 Dep 类

设置多个观察者检测同一个数据

// Dep.jsvar uid = 0export default class Dep { constructor() { this.id = uid++ // console.log('construct Dep ' + this.id) this.subs = [] } addSub(sub) { this.subs.push(sub) } depend() { if (Dep.target) { if (this.subs.some((sub) => { sub.id === Dep.target.id })) { return } this.addSub(Dep.target) } } notify() { const s = this.subs.slice(); for (let i = 0, l = s.length; i < l; i++) { s[i].update() } }}// Watcher.jsimport Dep from "./Dep.js"var uid = 0export default class Watcher { constructor(target, expression, callback) { this.id = uid++ this.target = target this.getter = parsePath(expression) this.callback = callback this.value = this.get() } get() { Dep.target = this const obj = this.target let value try { value = this.getter(obj) } finally { Dep.target = null } return value } update() { this.run() } run() { this.getAndInvoke(this.callback) } getAndInvoke(cb) { const obj = this.target const newValue = this.get() if (this.value !== newValue || typeof newValue === 'object') { const oldValue = this.value this.value = newValue cb.call(obj, newValue, newValue, oldValue) } }}function parsePath(str) { var segments = str.split('.'); return (obj) => { for (let i = 0; i < segments.length; i++) { if (!obj) return; obj = obj[segments[i]] } return obj; };}// task2.jsimport observe from "../observe.js";import Watcher from "../Watcher.js";const task2 = function() { const a = { b: { c: { d: { h: 1 } } }, e: { f: 2 }, g: [ 1, 2, 3, { k: 1 }] } const ob_a = observe(a) const w_a = new Watcher(a, 'b.c.d.h', (val) => { console.log('1111111111') }) a.b.c.d.h = 10 a.b.c.d.h = 10 console.log(a)}task2()

执行结果如下,可以看到成功响应了数据变化

本文链接地址:https://www.jiuchutong.com/zhishi/313197.html 转载请保留说明!

上一篇:dedecms自动生成RSS和网站地图(dedecms采集怎么用)

下一篇:phpcms不支持缩略图和水印怎么办

  • 微信号被注销了可以恢复吗(微信号被注销了怎么找回)

    微信号被注销了可以恢复吗(微信号被注销了怎么找回)

  • 微信号可以改成中文吗(微信号可以改成姓名吗)

    微信号可以改成中文吗(微信号可以改成姓名吗)

  • 惠普m30w用非原装硒鼓可以吗(惠普m30w质量好吗)

    惠普m30w用非原装硒鼓可以吗(惠普m30w质量好吗)

  • nova5外屏碎了(nova5pro外屏碎了)

    nova5外屏碎了(nova5pro外屏碎了)

  • 徕卡q照片怎么导入手机(徕卡q照片怎么导入苹果手机)

    徕卡q照片怎么导入手机(徕卡q照片怎么导入苹果手机)

  • 二寸照片尺寸像素宽高(二寸照片尺寸像素分辨率600)

    二寸照片尺寸像素宽高(二寸照片尺寸像素分辨率600)

  • 蓝牙音箱可以边充电边用吗(蓝牙音箱可以边充电边听吗)

    蓝牙音箱可以边充电边用吗(蓝牙音箱可以边充电边听吗)

  • 原彩显示没有了(iphone换屏后原彩显示没有了)

    原彩显示没有了(iphone换屏后原彩显示没有了)

  • 优酷视频上传审核多久(优酷上传视频审核时间是多久)

    优酷视频上传审核多久(优酷上传视频审核时间是多久)

  • ml7e2ch/a是什么苹果几(ml7j2ch/a是什么版本的苹果)

    ml7e2ch/a是什么苹果几(ml7j2ch/a是什么版本的苹果)

  • 怎样设置畅连通话(设置畅连通话)

    怎样设置畅连通话(设置畅连通话)

  • 苹果的水印在哪里设置(苹果手机的水印设置在哪里可以找到)

    苹果的水印在哪里设置(苹果手机的水印设置在哪里可以找到)

  • thinkpad是联想的品牌吗(thinkpad算联想吗)

    thinkpad是联想的品牌吗(thinkpad算联想吗)

  • java基本数据类型(java基本数据类型和引用类型的区别)

    java基本数据类型(java基本数据类型和引用类型的区别)

  • 域名总长度不能超过多少(域名总长度不能为负数吗)

    域名总长度不能超过多少(域名总长度不能为负数吗)

  • 苹果x是什么基带(苹果x是什么基带芯片)

    苹果x是什么基带(苹果x是什么基带芯片)

  • 手机ssid怎么设置(手机如何设置ssid)

    手机ssid怎么设置(手机如何设置ssid)

  • 手机里的录音怎么删除(手机里的录音怎么转换成mp 3格式)

    手机里的录音怎么删除(手机里的录音怎么转换成mp 3格式)

  • mysql数据库死锁解决方法(mysql数据库死锁解决)

    mysql数据库死锁解决方法(mysql数据库死锁解决)

  • vivo怎么看电池损耗(VIVO怎么看电池损耗)

    vivo怎么看电池损耗(VIVO怎么看电池损耗)

  • oppok3有闪充吗(oppok3支持30w闪充吗)

    oppok3有闪充吗(oppok3支持30w闪充吗)

  • 滴滴怎么预约快车(滴滴出行里的预约快车怎么预约)

    滴滴怎么预约快车(滴滴出行里的预约快车怎么预约)

  • Windows更新下载慢怎么办(windows更新下载的文件在哪)

    Windows更新下载慢怎么办(windows更新下载的文件在哪)

  • require.context()的用法详解

    require.context()的用法详解

  • 现代 C++ 编程指南(现代c++教程)

    现代 C++ 编程指南(现代c++教程)

  • 撤销增值税申报流程
  • 个人所得税综合税率表2023
  • 生产性资金是生产资料吗
  • 海关缴款书有效期多久
  • 差额征税怎么填写申报表
  • 材料采购合同需要注意什么
  • 如何开小加工厂
  • 预授权撤销怎么撤销
  • 支付给个人的佣金怎么做账务处理
  • 预收购货单位货款
  • 销售旧房不能取得评估价格
  • 安全费用中的固定资产如何写会计分录?
  • 增值税与普通发票的关系
  • 库存商品过期报废需要什么附件
  • 老师课时费计入什么科目
  • 关于处置固定资产的请示
  • 国税定额发票有效期是多长时间
  • 单位租房水电费是个人名字是否可以抵扣
  • 停车场如何申领车牌号
  • 商誉摊销法的优缺点
  • win10怎么查看电池健康度
  • 企业预付保险费怎么做账
  • 人工费没有发票年度汇算调增需要进行调帐处理吗
  • php与jquery
  • thinkphp 路由
  • PHP中Http协议post请求参数
  • linux中cw
  • win10商店无法加载
  • 无销售发票的基本户收入?
  • 迷迭香的养殖方法
  • wifi万能钥匙密码王
  • 当财务报表中列报对应数据时
  • vue3.0用法
  • thinkphp 插件
  • ajax向php传值
  • vs code前端插件
  • php实现base64图片上传方式实例代码
  • 简述php的概念和特点
  • 前端跨域解决方案设计
  • ai复制命令
  • 基于车联网
  • 出口企业的出口比例怎么算
  • 小微企业0税务报税流程
  • 进出口会计账务处理
  • 股权转让给个人和公司的区别
  • 安装购买的材料怎么做账
  • 入股投资的钱能取出来吗
  • 计提的管理费用要结转吗
  • 金税盘抵增值税
  • 动漫产业增值税率是多少
  • 注册资本认缴与实缴有什么区别
  • 挂靠别人公司税怎么交?
  • 季度末需要结转本年利润吗
  • 逾期未缴税款法律依据
  • 物流公司账务处理流程及方法
  • 开发成本转到哪里
  • 会计上有哪些
  • 会计政策变更的追溯调整法和未来适用法
  • mysql批量更新多条数据
  • win7提示盗版怎样激活
  • windows10的设置在哪里
  • linux网络管理及应用
  • linux中如何配置环境变量
  • win10怎么打开语言设置
  • mac安装win10键盘失灵
  • sethook.exe - sethook进程是什么文件 有何作用
  • windows 10预览版
  • win8.1应用
  • win10系统激活后怎么关闭
  • nodejs基本原理
  • python3遍历
  • input输入@弹出框
  • vue移动端app开发流程
  • checkbox选中一个其余选项置灰
  • 摩托车车船税怎么收费标准
  • 申报期一般是什么时候
  • 2020年军人自主择业条件
  • 购房发票的发票代码是哪个
  • 公交爱心卡需要每年审吗
  • 自然人电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设