前端基础之《Vue（4）—响应式原理》
一、什么是响应式
1、响应式英文reactive
当你get/set一个变量时，你有办法可以“捕获到”这种行为。
2、一个普通对象和一个响应式对象对比
（1）普通对象
<script>
// 这种普通对象不具备响应式
var obj1 = {
a: 1,
b: 2
}
</script>普通对象，当我们获取、修改属性的时候没办法捕获get/set行为（这种普通对象是不具备响应式的）：
（2）响应式对象
<script>
var obj2 = {}
var a = 1
var b = 2
// 给obj2这个对象添加一个新属性
Object.defineProperty(obj2, 'a', {
get() {
console.log(`有人访问了a`)
return a
},
set(val) {
console.log(`有人修改了a`)
a = val
}
}) // 给obj2对象加一个a属性
Object.defineProperty(obj2, 'b', {
get() {
console.log(`有人访问了b`)
return b
},
set(val) {
console.log(`有人修改了b`)
b = val
}
}) // 给obj2对象加一个b属性
</script>当获取、修改obj2属性的时候，会触发钩子函数。obj2对象多了get和set函数。obj2具有了响应式：
二、响应式原理
1、流程图
2、代码
<html>
<head>
<title>响应式原理</title>
</head>
<body>
输入：<input id="ipt" type="text" />
输出：<h2 id="h2" style='display:inline-block;'></h2>
<hr>
<h1 id="h1"></h1>
<button id="btn">自增</button>
<script>
// 这是模拟data选项（普通的对象）
const data = {
name: '张三',
num: 1
}
// 这是模拟vue组件实例
const app = {}
// 对data进行遍历，['name', 'num']
// 遍历完了把数组放到app上
// 生命周期的第一阶段（劫持，就是添加get/set）
Object.keys(data).forEach(k=>{
Object.defineProperty(app, k, {
// handle加劫持
get() {
console.log(`getter ${k}`) // touch操作
return data[k]
},
set(val) {
console.log(`setter ${k}`) // notify操作
data[k] = val
watcher(k) // 通知更新界面
}
})
})
// dep对象专门用于依赖收集的
const dep = {
name: [],
num: []
}
// 生命周期的第二阶段（相当于挂载阶段）
// Collect as Dependency依赖收集
function init() {
// 模拟v-model='name'
dep['name'].push(() => { // 依赖收集
document.getElementById('ipt').value = app.name // get功能
})
// 绑定input事件
document.getElementById('ipt').addEventListener('input', ev => {
app.name = ev.target.value // set功能
})
// 模拟v-text='name'
dep['name'].push(() => {
document.getElementById('h2').innerText = app.name // get功能
})
dep['num'].push(()=> {
document.getElementById('h1').innerText = app.num // get功能
})
document.getElementById('btn').addEventListener('click', ev => {
app.num++ //set功能
})
// 第一次更新DOM
Object.keys(dep).forEach(k=>watcher(k))
}
// 封装一个Watcher
function watcher(k) {
dep[k].forEach(fn=>fn()) // 循环调用变量依赖的function
}
// 调用init
init()
</script>
</body>
</html>
3、说明
（1）生命周期的第一阶段（劫持，就是添加get/set）
"Touch"和Notify
（2）生命周期的第二阶段（相当于挂载阶段）
把DOM放在真实的DOM上渲染，Collect as Dependency依赖收集
收集的结果是得到一个Watcher，通过re-render更新DOM（以后变量有变化，我通知Watcher，让Watcher再去更新界面）
（3）依赖收集
我要改变表单的值，并且要push一个依赖
二、vue的响应式原理小结
1、正常的对象是没有办法做更新的，必须要给它加钩子，才能知道它被访问
2、解释几个重要概念
劫持：使用Object.defineProperty对data选项进行遍历并添加getter/setter的钩子
touch：当指令第一次与声明式变量绑定时，第一次触发声明式变量的get钩子
依赖收集：当第一次touch时，把当前声明式变量的更新方法添加到dep依赖数组中
watcher：与声明式变量对应的DOM方法
re-render：当声明式变量被set时，Vue通知watcher更新DOM
3、响应式原理
当vue组件被创建时，在生命周期的第一阶段，vue使用Object.defineProperty()对data选项进行遍历劫持并添加get/set钩子。
在生命周期第二阶段，指令第一次与声明式变量touch时，发生依赖收集，再调用当前组件的watch第一次更新DOM，DOM视图就显示出来了。
当声明式变量发生变化时，vue再次通知watcher更新视图，这就是响应式。