邯郸市网站建设多少钱沈阳cms建站模板
一、什么是响应式
1、响应式英文reactive
当你get/set一个变量时，你有办法可以“捕获到”这种行为。
2、一个普通对象和一个响应式对象对比
（1）普通对象
<script>// 这种普通对象不具备响应式var obj1 = {a: 1,b: 2}
</script>普通对象，当我们获取、修改属性的时候没办法捕获get/set行为（这种普通对象是不具备响应式的）：
（2）响应式对象
<script>var obj2 = {}var a = 1var 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] = valwatcher(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功能})// 第一次更新DOMObject.keys(dep).forEach(k=>watcher(k))}// 封装一个Watcherfunction watcher(k) {dep[k].forEach(fn=>fn()) // 循环调用变量依赖的function}// 调用initinit()</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更新视图，这就是响应式。