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;

/

源码库