Vue2.x响应式原理：深入理解数据绑定背后奥秘

2022-11-17 16:12:30

响应式数据绑定基础

在讨论Vue的响应性之前，先了解一下JavaScript中的对象属性访问与修改。这些操作触发了浏览器的getter和setter方法。Vue利用这些特性来实现数据的响应化，每当数据变更时通知视图更新。

数据观测（Observer）

Vue2.0的核心机制之一是通过Object.defineProperty()来为数据对象的所有属性添加getter和setter，从而在读取或修改属性值时自动执行相应的处理逻辑。此方法只支持非IE浏览器。代码示例如下：

function defineReactive(obj, key, val) {
    var dep = new Dep();
    Object.defineProperty(obj, key, {
        get: function reactiveGetter() {
            if (Dep.target) {
                dep.depend(); // 将订阅者添加到依赖集合
            }
            return val;
        },
        set: function reactiveSetter(newVal) {
            if (newVal === val) return;
            val = newVal;
            dep.notify(); // 通知所有订阅者进行更新
        }
    });
}

计算属性与监视器（Computed and Watcher）

计算属性依赖于其他属性的值，Vue会跟踪这些依赖并在相关数据变更时自动触发计算属性的重新计算。监视器允许开发者监听数据的变化并执行自定义逻辑。

var vm = new Vue({
    el: '#app',
    data() {
        return { count: 0 };
    },
    computed: {
        doubleCount() { return this.count * 2; }
    },
    watch: {
        count(newVal, oldVal) { console.log(`count changed from ${oldVal} to ${newVal}`); }
    }
});

Vue生命周期与虚拟DOM

生命周期钩子

Vue组件的整个生命周期包括多个关键阶段，如创建、挂载、更新和销毁。每个阶段都对应特定的钩子函数，开发者可以在这些时机点执行特定操作。

export default {
    created() { console.log('Component has been created.'); },
    mounted() { console.log('Component has been mounted to DOM.'); }
};

虚拟DOM

虚拟DOM是Vue性能优化的核心。当数据变动时，Vue会先在内存中生成一个新的虚拟DOM树，并通过diff算法与旧的虚拟DOM进行比较，找出差异后仅对真实DOM执行必要的更新操作。

模板编译和更新机制

编译过程

模板编译是将HTML模板转换为渲染函数的过程。Vue使用基于正则表达式的解析器来处理模板中的指令和插值，并生成相应的虚拟节点树（VNode）。

var template = '<div>{{ message }}</div>';
var compiled = compile(template);
// 生成的render函数会接收一个参数h，即创建元素的辅助函数
compiled.render(h) {
    return h('div', this.message);
}