阅读 30

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')
复制代码
文章分类
前端
文章标签