位置: 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不支持缩略图和水印怎么办

  • 麒麟9000 4g版和5g版有什么不同(麒麟90004g版和5g版性能)

    麒麟9000 4g版和5g版有什么不同(麒麟90004g版和5g版性能)

  • oppoa32屏幕尺寸(oppoa32尺寸大小)

    oppoa32屏幕尺寸(oppoa32尺寸大小)

  • 美团支付详情如何删除(美团付款明细)

    美团支付详情如何删除(美团付款明细)

  • 微信视频怎么自定义铃声(微信视频怎么自动挂断)

    微信视频怎么自定义铃声(微信视频怎么自动挂断)

  • 抖音草稿箱在哪找不到(华为手机抖音草稿箱在哪)

    抖音草稿箱在哪找不到(华为手机抖音草稿箱在哪)

  • 苹果电脑开机白屏怎么办(苹果电脑开机白苹果)

    苹果电脑开机白屏怎么办(苹果电脑开机白苹果)

  • 三星s8安全模式怎么关闭(三星s8安全模式无法解除)

    三星s8安全模式怎么关闭(三星s8安全模式无法解除)

  • 手机号码的数字代表什么意义(手机号码的数字编码意义)

    手机号码的数字代表什么意义(手机号码的数字编码意义)

  • 腾讯会议录音在哪(腾讯会议录音保存在哪里)

    腾讯会议录音在哪(腾讯会议录音保存在哪里)

  • b站怎么开小窗(b站怎么开小窗到其它软件苹果)

    b站怎么开小窗(b站怎么开小窗到其它软件苹果)

  • 手机卡放到另一个手机上没有联系人的原因(手机卡放到另一个手机上微信聊天记录可以恢复吗)

    手机卡放到另一个手机上没有联系人的原因(手机卡放到另一个手机上微信聊天记录可以恢复吗)

  • 笔记本天线原理(笔记本天线作用)

    笔记本天线原理(笔记本天线作用)

  • 爱奇艺pc什么意思(爱奇艺pcweb端是什么意思)

    爱奇艺pc什么意思(爱奇艺pcweb端是什么意思)

  • 爱奇艺黄金会员可以几个人同时登录吗(爱奇艺黄金会员是什么意思)

    爱奇艺黄金会员可以几个人同时登录吗(爱奇艺黄金会员是什么意思)

  • crr一ul00是什么型号手机(crr-ul20)

    crr一ul00是什么型号手机(crr-ul20)

  • mate30nfc怎么用(mate30nfc功能怎么打开)

    mate30nfc怎么用(mate30nfc功能怎么打开)

  • 华为荣耀10怎么连拍(华为荣耀10怎么开空调)

    华为荣耀10怎么连拍(华为荣耀10怎么开空调)

  • 荣耀v30出厂配件有没有耳机(荣耀v30手机配件)

    荣耀v30出厂配件有没有耳机(荣耀v30手机配件)

  • 淘宝上拒绝签收点哪里(淘宝上拒绝签收怎么操作)

    淘宝上拒绝签收点哪里(淘宝上拒绝签收怎么操作)

  • 苹果6nfc功能在哪里(苹果6nfc功能在手机哪里)

    苹果6nfc功能在哪里(苹果6nfc功能在手机哪里)

  • 荣耀手环4有几个表盘(荣耀手环4几轴)

    荣耀手环4有几个表盘(荣耀手环4几轴)

  • 微信图像倒立怎么解决(微信倒过来的表情怎么弄)

    微信图像倒立怎么解决(微信倒过来的表情怎么弄)

  • vivo怎么设置拦截(vivo怎么设置拦截骚扰电话)

    vivo怎么设置拦截(vivo怎么设置拦截骚扰电话)

  • mate20支持多少倍无损变焦(mate20支持多少倍变焦)

    mate20支持多少倍无损变焦(mate20支持多少倍变焦)

  • Linux应用帮助你来征服数学学习(linux help)

    Linux应用帮助你来征服数学学习(linux help)

  • 房产税计入管理费用了,汇算清缴怎么调
  • 企业所得税法
  • 异地车辆流程
  • 建筑工程机械服务有限公司企业
  • 股权转让产生的印花税
  • 存续分立的账务处理
  • 劳动生产总值和总产值是一回事吗
  • 个税手机号码没有了怎么办
  • 民办职业技能培训学校办学许可证
  • 账务处理和税前扣除如何处理
  • 住宿费专用发票税率是多少
  • 资本公积金转增股本所获取的收益属于
  • 政府制定优惠政策
  • 零余额账户银行余额调节表
  • 重复缴税怎么做账
  • 计提坏账准备的前提条件
  • 土地增值税预缴税率
  • 一般纳税人可以开普票吗
  • 单位旧电脑处置
  • 零售通收银
  • 无形资产入账价值包括注册费吗
  • 小企业报表为什么勾选不到小型微利企业
  • 待摊费用核算的内容主要包括
  • 没有进出口权可以做外贸吗
  • 财报申报逾期可不可以补报
  • 房地产中介公司排名
  • 月中发当月工资是怎么算的
  • 装饰公司收到客户工程款做分录
  • 2018增值税暂行条例
  • 超市开具预付卡发票不征税发票上税吗
  • Win10家庭版安装教程
  • 穿越火线刷枪视频教程
  • 商事账薄的特征
  • 代扣个人缴纳社保费
  • 既征增值税又征消费税的是
  • msmpeng.exe是什么程序
  • 应付票据转让会计分录
  • 微前端Qiankun介绍
  • php实现邮件发送
  • pytorch_lightning.utilities.exceptions.MisconfigurationException: You requested GPUs: [1] But...
  • 机器学习中的数学原理——过拟合、正则化与惩罚函数
  • 数据挖掘技术介绍
  • 用友软件年度结转操作步骤
  • 上级拔入资金
  • 免抵退申报汇总表在哪里
  • 企业收到土地补偿金需要开发票吗
  • 残疾人保障金汇算清缴的处理
  • 商业折扣影响主营业务成本吗
  • 捐赠的增值税可以抵扣吗
  • 如何编制试算平衡表图示
  • 高企数据造假
  • 申报残保金的时候有处罚决定书怎么办
  • 初次购买税控盘480都能抵扣吗
  • 房屋拆除的会计分录
  • 企业中征码怎么查询
  • 记帐凭证的填制方法
  • 债务抵消的构成要件
  • 房地产公司支付工程款账务处理
  • 营业外支出增加说明了什么
  • 零售商品储存的核算包括[ ]
  • 银行业应收票据分析
  • windows更改图标大小
  • 安装双系统ubuntu和win
  • win8开始界面如何设置成win7
  • win7电脑曝光度过高怎么调
  • linux怎么cd
  • 用css滤镜实现的代码
  • python3.9爬取网页教程
  • windows下安装nas
  • unity mathf.sin
  • scrollbottom用法
  • 财税专家刘杨简历图片介绍
  • 郑州地方税务局网站官网
  • 投诉10080 48小时都没有回复
  • oppo纳税额
  • 深圳市税务网上注销流程图
  • 双公开双反馈什么意思
  • 3.5排量的车船税多少钱
  • 湖南国税网上营业厅
  • 购置税周天上班吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设