Vue学习笔记(十三) 响应式原理
1、外在表现
响应式系统是 Vue 的核心特性之一，它的实质其实就是 当数据模型发生变化时，视图将会自动更新
这样可以避免开发人员直接操作 DOM，大大降低开发难度，这也是 Vue 提倡 数据驱动 的原因，我们看一个例子
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<div>Counter: {{ counter }}</div><br/>
<button v-on:click="increase">Increase</button>
<button v-on:click="decrease">Decrease</button>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increase: function() { this.counter += 1 },
decrease: function() { this.counter -= 1 }
}
})
</script>
</body>
</html>
当我们点击按钮调用方法时，会使得数据 counter 增加或减少，而对应的视图 {{ counter }} 也会相应变化
整个过程，我们只需关注数据层的处理，而无需考虑视图层的渲染，这就是响应式系统带给我们的好处
2、内在原理
响应式系统的核心就是当数据模型发生变化时，视图将会自动更新，那么 Vue 它是怎么做到的呢？
（1）数据代理
每个组件实例都有一个 data 选项，当我们将一个对象传入 data 选项时，Vue 将会遍历这个对象的所有属性
并且使用 Object.defineProperty 方法将这些属性全部转换为 getter 和 setter 方法
// 模拟实现数据代理（简单版）
function proxy(data) {
if (!data) return
if (typeof data !== 'object') return
Object.keys(data).forEach(function(key) { // 将对象中的所有属性转换为存取器
defineReactive(data, key, data[key])
})
function defineReactive(object, key, value) { // 这里使用闭包是为了解决栈溢出问题
proxy(value) // 递归
Object.defineProperty(object, key, {
enumerable: true,
configurable: true,
get: function() {
console.log('访问属性', key)
return value
},
set: function(new_value) {
proxy(new_value) // 递归
console.log('设置属性', key)
value = new_value
}
})
}
}
// 测试使用数据代理
class Component {
constructor(options) {
this.data = options.data
proxy(this.data)
}
}
let component = new Component({
data: {
counter: 0,
message: 'hello',
mapping: { 'a': 1, 'b': 3, 'c': 5 }
}
})
console.log(component.data.mapping.a) // 访问属性 mapping -> 访问属性 a -> 1
component.data.mapping.a = 2 // 访问属性 mapping -> 设置属性 a
console.log(component.data.mapping.a) // 访问属性 mapping -> 访问属性 a -> 2
（2）依赖收集
每个组件实例都有一个 watcher 实例，它会在组件渲染过程中把接触过的（getter 被触发的）数据都记录为依赖
当依赖的 setter 被触发时，就会通知 watcher，使得 watcher 关联的组件重新渲染，这里放一张官方文档的图：
（3）组件渲染
如果侦听到数据变化，Vue 就会开启一个队列，缓冲在同一事件循环中发生的所有数据变更
在这个过程中，如果一个 watcher 它被多次触发，那么只会推入队列一次
然后在下一个事件循环中，Vue 刷新队列并执行实际的 DOM 操作
3、注意事项
（1）无法动态添加根级响应式属性
Vue 在初始化实例时，会对 data 对象中的属性执行 getter/setter 转化
所以，只有在 data 对象上的属性才能让 Vue 将它转换为响应式属性
var vm = new Vue({
data: {
a: 1, // 响应式属性
object: {}
}
})
vm.b = 2 // 非响应式属性
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性
但是可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
Vue.set(vm.object, 'b', 2)
或者使用 vm.$set 实例方法，它也是全局 Vue.set 方法的别名
this.$set(this.object, 'b', 2)
（2）无法检测数组变化
由于 Object.defineProperty 方法的限制，在修改数组中的元素时无法触发 setter
Vue 也就无法检测到数组的变化，因此对于数组操作是非响应式的
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[0] = 'x' // 非响应式的
这时，我们还是可以使用 Vue.set(object, propertyName, value) 方法解决这个问题
Vue.set(vm.items, 0, 'x')
另外，Vue 也提供变异的数组方法处理这种情况，变异的数组方法可以使得数组操作变成响应式的
变异的数组方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vm.items.splice(0, 1, 'x')
【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】
