Vue依赖收集基础数据类型_vue基本数据类型-CSDN博客

本文深入解析Vue.js中数据初始化及数据响应化的实现机制，包括数据观察者Observer的使用，defineReactive方法如何使数据变成响应式，以及依赖收集与更新的核心流程。通过具体代码示例，详细阐述了Vue在页面渲染时如何收集依赖并更新视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 数据初始化流程

function initData(vm) {
    var data = vm.$options.data;
    data = typeof data === 'function' ?
        data.call(vm, vm) : data || {};
    new Observer(data);
}

function Observer(data) {
    var keys = Object.keys(value);
    for (let i = 0; i < keys.length; i++) {
        // 设置成响应式
        defineReactive(obj, keys[i]);
    }
}
// 设置数据响应式的核心原理
function defineReactive(obj, key) {
    var dep = new Dep();
    var value = obj[key];
    Object.defineProperty(obj, key, {
        get() {
            // 依赖收集
        },
        set() {
            // 依赖更新
        }
    })
}

2. 依赖收集的流程

页面渲染函数

with(this) {
    return _c('div', {}, [name])
}

读取name
渲染函数执行，此时的name就是当前组件实例上的name
保存watcher

// 设置数据响应式的核心原理
function defineReactive(obj, key) {
    var dep = new Dep();
    var value = obj[key];
    Object.defineProperty(obj, key, {
        get() {
            // 依赖收集
            // 此时的Dep.target上面就是存储了watcher
            // 哪里读取了这个obj[key], Dep.target上就是存储的那个watcher
            if (Dep.target) {
                // 添加进当前obj[key]的依赖数组中
                dep.addSub(Dep.target);
            }
        },
        set() {
            // 依赖更新
        }
    })
}