[切图仔救赎]炒冷饭--在线手撸vue2响应式原理
--图片来源vue2.6正式版本（代号：超时空要塞）发布时，尤雨溪推送配图。
前言
其实这个冷饭我并不想炒，毕竟vue3马上都要出来。我还在这里炒冷饭，那明显就是搞事情。
起因：
作为切图仔搬砖汪，长期切图jq一把梭。重复繁琐的切图，让自己陷入了一个无限的围城。想出去切图这个围城看一看，但是又害怕因为切图时间久了，自己会的也只有切图了。
为了后面能够继续搬砖恰饭，帮助自己跳出切图仔的围城。也去看了vue相关文档，当时记忆深刻觉得还行。可是G胖这个时候发动小紫本和打折魔咒，不知不觉又沉迷于DOTA小本子上面了。关于vue响应式原理很快忘得一塌糊涂，只记得一个属性Object.defindProperty，然后就没有然后了......
为了避免自己后面再次忘记，所以这里炒一个冷饭加深记忆。
响应式vue
在讲解vue响应式的原理之前，让我们来一段Vue代码作为示例：
<div id="app">
<div>主食: {{ food }}</div>
<div>饮料: {{ drink }}</div>
<div>菜单: {{ menu }}</div>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
food: '煎饼果子',
drink: '热豆浆'
},
computed: {
menu() {
return this.food + this.drink
}
}
})
</script>
当food和drink发生变化后，Vue会做两件事：
-
在页面上更新
food和drink的值。 -
再次调用
menu, 重新计算food + drink的值, 并在页面上面更新。
更新值+计算值做的事情其实很简单，几行代码的事情。问题是当food或者drink变化时，Vue是怎么知道谁变化，然后马上响应其行为，去执行那"简单的几行代码"？
所以，当看到Vue案例时，词穷的我当时第一反应就是牛皮。
之所以发出感叹，是因为通常的JavaScript代码是实现不了这样的功能的。话不多说，让我们直接上代码来说明：
let food = "煎饼果子"
let drink = "热豆浆"
let menu = null
menu = food + drink
food = '炸鸡汉堡'
drink = '快乐水'
console.log(menu)
最终控制台打印结果：
煎饼果子热豆浆
如果是在Vue当中，food和drink发生了变化，那么Vue会跟着做出响应动作，从而在控制台输出我们想要的结果:
炸鸡汉堡快乐水
菜单响应
这里就出现第一个问题，当food或者drink 发生变化之后，menu并不会响应其变化。这个时候就需要我们来解决这个问题，满足menu响应。
借鉴Vue一样，我们先把menu的计算方法。也写成一个函数，取名为target。然后每次food或者drink变化的时候调用target函数
let food = "煎饼果子"
let drink = "热豆浆"
let menu = null
let target = () => {
menu = food + drink
}
target() // 初始化菜单menu
food = '炸鸡汉堡'
drink = '快乐水'
target()
console.log(menu)
控制台输出：
炸鸡汉堡快乐水
浴室沉思
前面一把梭直接调用的满足menu响应的问题，但是也间接留下一个新的疑惑点。这里针对一个菜单，就写了一个target。假设有多个菜单需要响应呢？
例如：
单人早餐 = 煎饼果子 + 热豆浆豪华套餐： 煎饼果子加两鸡蛋 + 热豆浆 + 油条一根午餐- ......
如果这个时候切换成：
单人午餐 = 炸鸡汉堡 + 快乐水豪华套餐： 双层炸鸡汉堡 + 快乐水 + 快乐薯条一包- ......
按照前面的逻辑, 估计得写N个target。这个时候响应式又是一个麻烦事情，可是有句话说的好。梭哈一时爽，一直梭哈一直爽。既然前面直接采用target一把梭完成，所以针对N个target方法，我也可以直接来个for循环一把梭能完成响应式问题。
for循环一把梭
- 定义一个数组，每定义了一个target函数。就存储到数组当中。
let storge = [] // 用来存储target
function record (){ //
storge.push(target)
}
- 定义循环函数，每次
data有变更。就调用这个函数，进行一把for循环.
function replay (){
storge.forEach(run => run())
}
- 合并成完整的代码：
let food = "煎饼果子"
let drink = "热豆浆"
let menu = null
food = '炸鸡汉堡'
drink = '快乐水'
let target = () => {
menu = food + drink
}
let storge = []; //用来存储更多的target
function record(target) {
storge.push(target)
}
function replay() {
storge.forEach(run => run())
}
record(target)
replay()
food = '炸鸡汉堡'
drink = '快乐水'
replay()
console.log(menu)
最后控制台成功输出：
炸鸡汉堡快乐水
Dep依赖类
通过一把梭实现功能，那么接下来就开始思考优化部分了。继续记录target这类的代码，这样有点怪怪的。为了后面方便管理，我们把代码进行简单的优化，封装成一个类：
class Dep {
constructor() {
this.subs = []
}
// 收集依赖
depend(sub) {
if (sub && !this.subs.includes(sub)) { // 做一个判断
this.subs.push(sub)
}
}
notify() {
console.log("暗号：下雨啦，收衣服啦！")
this.subs.forEach(sub => sub()) // 运行我们的target
}
}
就这样target函数存储在类的subs中，record也变成了depend，使用notify来代替replay
封装成类之后，每次当data数据更新的时候，就会发出一个暗号下雨啦，收衣服啦！ 然后就开始遍历运行相应的target依赖了。
新的调用代码就更加清晰明了：
let dep = new Dep()
let food = "煎饼果子"
let drink = "热豆浆"
let menu = null
let target = () => {
menu = food + drink
}
dep.depend(target)
target() // 完成menu第一次初始化
console.log(menu)
food = '炸鸡汉堡'
drink = '快乐水'
dep.notify()
console.log(menu)
控制台输出：
煎饼果子热豆浆
暗号：'下雨啦，收衣服啦！'
炸鸡汉堡快乐水
观察者亮相
当前的代码，是确定一个依赖事件，就定义target，然后调用依赖类dep.depend将其存储起来。
let target = () => { menu = food + drink }
dep.depend(target)
target()
这个时候又新来一个target事件又该如何做:
新添加一个target事件?
let target2 = () => { 新的依赖事件 }
dep.depend(target2)
target2()
要是有几百个依赖，那还不得上天。我估计要是这样写代码，估计你的同事要说你写代码像CXK
观察者函数
借鉴观察者模式，封装一个watcher函数. 帮你观察记录相关target事件，避免多次声明变量。
function watcher(myFun) {
target = myFun
dep.depend(target)
target()
target = null
}
watcher(() => {
menu = food + drink
})
正如你所看到的，watcher函数接受myFunc参数，将其赋给全局的target上，调用dep.depend()将其添加到数组里，之后调用并重置target。
既然又封装一个新的函数，那么验证又将是必不可少的了。这里我们修改一下drink来试试：
drink = "快乐水"
console.log(menu)
dep.notify()
console.log(menu)
控制台输出结果：
煎饼果子热豆浆
暗号：下雨啦，收衣服啦！
煎饼果子快乐水
Object.defineProperty()
基本用法
铺垫了这么久，一个关键性角色这个时候也登场了。
该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys 方法）， 这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。
--《MDN文档》
不明觉厉？ 那就先热身一下，进入快乐的举例子环节：
let data = {
food: '煎饼果子',
drink: '热豆浆'
}
Object.defineProperty(data, 'food', {
get() {
console.log(`触发get方法`)
},
set(newVal) {
console.log(`设置food为${newVal}`)
}
})
data.food
data.food = 炸鸡汉堡
控制台输出：
触发get方法
设置food为炸鸡汉堡
简单封装
但是仅仅凭借object.defineProperty是无法完成当一个数据更新了，完成数据响应。而且代码这里也是只是对food做了一个处理, 还有drink没有处理，所以为了完成data所以属性都做相应的处理。接下来就是对于Object.defineProperty()进行简单的封装处理了：
Object.keys(data).forEach(key => {
let value = data[key]
Object.defineProperty(data, key, {
get() {
return value
},
set(newVal) {
value = newVal
}
})
})
遍历了data每个属性，然后对每个属性进行侦听。这样data的属性一旦改变，就会自动发出通知.
代码整合
前面零零散散分别讲了 Dep、watcher和object.defineProperty, 那么接下来就让我们把这个几个部分整合到一起，完整查看整个代码：
let data = {
food: '煎饼果子',
drink: '热豆浆'
}
class Dep {
constructor() {
this.subs = []
}
// 收集依赖
depend(sub) {
if (sub && !this.subs.includes(sub)) { // 做一个判断
this.subs.push(sub)
}
}
notify() {
console.log("暗号：下雨啦，收衣服啦！")
this.subs.forEach(sub => sub()) // 运行我们的target
}
}
Object.keys(data).forEach(key => {
let value = data[key]
let dep = new Dep()
Object.defineProperty(data, key, {
get() {
dep.depend(target)
return value
},
set(newVal) {
value = newVal
dep.notify()
}
})
})
function watcher(myFun) {
target = myFun
// dep.depend(target) 这里修改，移动到Object.defineProperty当中去
target()
target = null
}
watcher(() => {
data.menu = data.food + data.drink
})
console.log(data.menu)
data.food = "炸鸡汉堡"
data.drink = "快乐水"
console.log(data.menu)
控制台输出：
煎饼果子热豆浆
暗号：下雨啦，收衣服啦！
炸鸡汉堡快乐
这里完全实现了文章开头所提出的需求，每当food或drink更新时，我们的menu也会跟着响应并更新。
这时候Vue文档的插图的意义就很明显了：
免责声明
以上就是我的炒冷饭内容，怕忘记重写总结一下，有说错的地方多担待。（特拿前端劝退师骚声明一份，窥伺好久了。）
意思就是写得略粗糙，别喷我。。。
我是车大棒，我为我自己插眼。
