Vue2响应式系统介绍
前言:
目前工作中大概有 的需求是在用 的技术栈,所谓知其然更要知其所以然,为了更好的使用 、更快的排查问题,最近学习了源码相关的一些知识,虽然网上总结 的很多很多了,不少自己一个,但也不多自己一个,欢迎一起讨论学习,发现问题欢迎指出。40%
Vue2
Vue
Vue
一、响应式系统要干什么
回到最简单的代码:
data = { text: 'hello, world' } const updateComponent = () => { console.log('收到', data.text); } updateComponent() data.text = 'hello, liang' // 运行结果 // 收到 hello, world
响应式系统要做的事情:某个依赖了 数据的函数,当所依赖的 数据改变的时候,该函数要重新执行。data
data
我们期望的效果:当上边 修改的时候, 函数再执行一次。data.text
updateComponent
为了实现响应式系统,我们需要做两件事情:
- 知道 中的数据被哪些函数依赖
data
data
中的数据改变的时候去调用依赖它的函数们
为了实现第 点,我们需要在执行函数的时候,将当前函数保存起来,然后在读取数据的时候将该函数保存到当前数据中。1
第 点就迎刃而解了,当修改数据的时候将保存起来的函数执行一次即可。2
在读取数据和修改数据的时候需要做额外的事情,我们可以通过 重写对象属性的 和 函数。Object.defineProperty()
get
set
二、响应式数据
我们来写一个函数,重写属性的 和 函数。get
set
/** * Define a reactive property on an Object. */ export function defineReactive(obj, key, val) { const property = Object.getOwnPropertyDescriptor(obj, key); // 读取用户可能自己定义了的 get、set const getter = property && property.get; const setter = property && property.set; // val 没有传进来话进行手动赋值 if ((!getter || setter) && arguments.length === 2) { val = obj[key]; } Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { const value = getter ? getter.call(obj) : val; /*********************************************/ // 1.这里需要去保存当前在执行的函数 /*********************************************/ return value; }, set: function reactiveSetter(newVal) { const value = getter ? getter.call(obj) : val; if (setter) { setter.call(obj, newVal); } else { val = newVal; } /*********************************************/ // 2.将依赖当前数据依赖的函数执行 /*********************************************/ }, }); }
为了调用更方便,我们把第 步和第 步的操作封装一个 类。1
2
Dep
export default class Dep { static target; //当前在执行的函数 subs; // 依赖的函数 constructor() { this.subs = []; // 保存所有需要执行的函数 } addSub(sub) { this.subs.push(sub); } depend() { // 触发 get 的时候走到这里 if (Dep.target) { // 委托给 Dep.target 去调用 addSub Dep.target.addDep(this); } } notify() { for (let i = 0, l = this.subs.length; i < l; i++) { this.subs[i].update(); } } } Dep.target = null; // 静态变量,全局唯一
我们将当前执行的函数保存到 类的 变量上。Dep
target
三、保存当前正在执行的函数
为了保存当前的函数,我们还需要写一个 类,将需要执行的函数传入,保存到 类中的 属性中,然后交由 类负责执行。Watcher
Watcher
getter
Watcher
这样在 类中, 中保存的就不是当前函数了,而是持有当前函数的 对象。Dep
subs
Watcher
import Dep from "./dep"; export default class Watcher { constructor(Fn) { this.getter = Fn; this.get(); } /** * Evaluate the getter, and re-collect dependencies. */ get() { Dep.target = this; // 保存包装了当前正在执行的函数的 Watcher let value; try { // 调用当前传进来的函数,触发对象属性的 get value = this.getter.call(); } catch (e) { throw e; } return value; } /** * Add a dependency to this directive. */ addDep(dep) { // 触发 get 后会走到这里,收集当前依赖 // 当前正在执行的函数的 Watcher 保存到 dep 中的 subs 中 dep.addSub(this); } /** * Subscriber interface. * Will be called when a dependency changes. */ // 修改对象属性值的时候触发 set,走到这里 update() { this.run(); } /** * Scheduler job interface. * Will be called by the scheduler. */ run() { this.get(); } }
Watcher
的作用就是将正在执行的函数通过 包装后保存到 中,然后调用传进来的函数,此时触发对象属性的 函数,会收集当前 。Watcher
Dep.target
get
Watcher
如果未来修改对象属性的值,会触发对象属性的 ,接着就会调用之前收集到的 对象,通过 对象的 方法,来调用最初执行的函数。set
Watcher
Watcher
uptate
四、响应式数据
回到我们之前没写完的 函数,按照上边的思路,我们来补全一下。defineReactive
import Dep from "./dep"; /** * Define a reactive property on an Object. */ export function defineReactive(obj, key, val) { const property = Object.getOwnPropertyDescriptor(obj, key); // 读取用户可能自己定义了的 get、set const getter = property && property.get; const setter = property && property.set; // val 没有传进来话进行手动赋值 if ((!getter || setter) && arguments.length === 2) { val = obj[key]; } /*********************************************/ const dep = new Dep(); // 持有一个 Dep 对象,用来保存所有依赖于该变量的 Watcher /*********************************************/ Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { const value = getter ? getter.call(obj) : val; /*********************************************/ // 1.这里需要去保存当前在执行的函数 if (Dep.target) { dep.depend(); } /*********************************************/ return value; }, set: function reactiveSetter(newVal) { const value = getter ? getter.call(obj) : val; if (setter) { setter.call(obj, newVal); } else { val = newVal; } /*********************************************/ // 2.将依赖当前数据依赖的函数执行 dep.notify(); /*********************************************/ }, }); }
五、Observer 对象
我们再写一个 方法,把对象的全部属性都变成响应式的。Observer
export class Observer { constructor(value) { this.walk(value); } /** * 遍历对象所有的属性,调用 defineReactive * 拦截对象属性的 get 和 set 方法 */ walk(obj) { const keys = Object.keys(obj); for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i]); } } }
我们提供一个 方法来负责创建 对象。observe
Observer
export function observe(value) { let ob = new Observer(value); return ob; }
六、测试
将上边的方法引入到文章最开头的例子,来执行一下:
import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { text: "hello, world", }; // 将数据变成响应式的 observe(data); const updateComponent = () => { console.log("收到", data.text); }; // 当前函数由 Watcher 进行执行 new Watcher(updateComponent); data.text = "hello, liang";
此时就会输出两次了~
收到 hello, world
收到 hello, liang
说明我们的响应式系统成功了。
七、总结
先从整体理解了响应式系统的整个流程:
每个属性有一个 数组, 会持有当前执行的函数,当读取属性的时候触发 ,将当前 保存到 数组中,当属性值修改的时候,再通过 数组中的 对象执行之前保存的函数。subs
Watcher
get
Watcher
subs
subs
Watcher
到此这篇关于Vue2响应式系统介绍的文章就介绍到这了,更多相关Vue2响应式系统内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://vue.windliang.wang
相关文章
- 这篇文章主要为大家详细介绍了python实现学生通讯录管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-02-25
- 如今高要求的分布式系统的建造者遇到了不能完全由传统的面向对象编程(OOP)模型解决的挑战,但这可以从Actor模型中获益。...2021-05-20
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 护卫神·主机管理系统该版本支持在Windows Server 200320082012,含32位和64位,直接开设配置WEB站、FTP站,以及SQL Server和MySQL,是您开设和管理虚拟主机的绝好帮手。但是对于新用户可能在使用上有一些困难,因此请仔细阅读如下说明文档...2016-01-27
- 这篇文章主要介绍了利用C#修改Windows操作系统时间,帮助大家更好的利用c#操作系统,感兴趣的朋友可以了解下...2020-12-08
vivo OriginOS新系统如何更新 originos系统更新方法
vivo新系统更新的步骤是什么?如何更新到vivo的最新系统?vivo的最新系统太亮眼了,不少vivo的用户都在跃跃欲试想体验一下最新的系统。vivo新系统虽然做出来了不过我们想体验的话还是要等待一段时间。到时大家通过下面的方法就可以使用到新系统了...2020-12-08- 这篇文章主要为大家详细介绍了C#实现影院售票系统,解析了售票系统的难点,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
ColorOS7.2好不好用 ColorOS7.2系统升级体验
ColorOS7.2系统怎么样?好不好用?值不值得升级?下面小编带来ColorOS7.2系统升级体验...2020-06-29- 这篇文章主要介绍了C#多线程编程中的锁系统(四):自旋锁,本文讲解了基础知识、自旋锁示例、SpinLock等内容,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了Unity实现换装系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-11
- 本文给大家介绍一个不错的需要登录的php 文件上传管理系统,功能简单有需要了解的同学可参考。 代码如下<?php$admin_pw="admin";//管理密码$uploaddir="upload";//上传目录session_start();if($_GET['action']=="g...2015-10-30
- 这篇文章主要为大家想详细介绍了C++学生信息管理系统的实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-04-25
源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods
本篇文章主要介绍的是Vue2 this 能够直接获取到 data 和 methods,阅读本文将能学到如何学习调试 vue2 源码、data 中的数据为什么可以用 this 直接获取到、methods 中的方法为什么可以用 this 直接获取到,需要的朋友可以参考一下...2021-09-23- 这篇文章主要为大家详细介绍了C语言学生成绩管理系统小设计,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-04-25
- 本文介绍了个人的《零压健身房管理系统(扁平化)》的基本流程和功能点的介绍,虚心接受各位的意见,欢迎在提出宝贵的意见,大家一起探讨学习...2021-09-26
- .net core是最近讨论频率很高的话题,下面这篇文章主要给大家介绍了关于利用.NET Core如何获取操作系统中各种信息的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧...2021-09-22
- 我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴...2015-12-21
- 这篇文章主要教大家如何在20分钟内成功编写bootstrap响应式页面,其实很简单,培养大家分分钟开发出一个高大上的页面能力,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要为大家详细介绍了C++顺序表实现图书管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-13
- 这篇文章主要介绍了C#实现操作windows系统服务(service)的方法,可实现系统服务的启动和停止功能,非常具有实用价值,需要的朋友可以参考下...2020-06-25