vue数据劫持发生在什么时候

Vue数据劫持发生在对象的属性被访问或修改的时候。 Vue.js 使用了 ES5 的 Object.defineProperty 方法来实现数据劫持，监视数据的变化并更新视图。每当组件的数据模型发生变化时，Vue 会自动更新视图以反映新的数据。这种数据劫持和观察机制是 Vue 响应式系统的核心。

一、数据劫持的定义和原理

Vue 数据劫持的核心是使用 Object.defineProperty 来为每个属性添加 getter 和 setter 方法。通过这些方法，Vue 能够在属性被访问或修改时自动进行必要的操作，如依赖收集和视图更新。

1、Object.defineProperty 方法

Object.defineProperty 是 JavaScript 提供的一个方法，用于直接在一个对象上定义一个新属性，或者修改现有属性，并返回这个对象。它允许我们控制属性的访问和修改行为。

let obj = {};
Object.defineProperty(obj, 'message', {
    get: function() {
        console.log('Getting value');
        return 'Hello';
    },
    set: function(newValue) {
        console.log('Setting value to ' + newValue);
    }
});

2、Vue 如何使用 Object.defineProperty

Vue 在初始化数据时，会遍历对象的每个属性，并使用 Object.defineProperty 为这些属性添加 getter 和 setter 方法。这些方法会在属性被访问或修改时被调用，从而实现数据劫持。

二、数据劫持的过程

数据劫持的过程可以分为以下几个步骤：

1、数据初始化

在 Vue 实例化过程中，Vue 会遍历 data 对象的每个属性，并通过 Object.defineProperty 将它们转化为 getter 和 setter。

2、依赖收集

当组件渲染时，getter 会被调用，Vue 会将当前的渲染 Watcher 添加到依赖列表中。这样，当数据发生变化时，Vue 知道哪些组件需要重新渲染。

3、数据变更

当 data 中的属性被修改时，setter 会被调用。Vue 会通知所有依赖于该属性的 Watcher，触发组件的重新渲染。

三、数据劫持的实现细节

以下是 Vue 数据劫持的实现细节，以帮助更好地理解其工作原理。

1、Observer 类

Observer 类用于递归地遍历对象的所有属性，并为它们添加 getter 和 setter 方法。

class Observer {
    constructor(value) {
        this.walk(value);
    }
    walk(obj) {
        for (let key in obj) {
            defineReactive(obj, key, obj[key]);
        }
    }
}
function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get: function() {
            // 依赖收集
            return val;
        },
        set: function(newValue) {
            if (val === newValue) return;
            val = newValue;
            // 通知依赖
        }
    });
}

2、Dep 类

Dep 类用于管理所有依赖于某个属性的 Watcher。当属性发生变化时，Dep 会通知所有的 Watcher 执行更新。

class Dep {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    notify() {
        this.subs.forEach(sub => sub.update());
    }
}

3、Watcher 类

Watcher 类用于响应属性的变化，并执行具体的更新操作。

class Watcher {
    constructor(vm, expOrFn, cb) {
        this.vm = vm;
        this.getter = parsePath(expOrFn);
        this.cb = cb;
        this.value = this.get();
    }
    get() {
        Dep.target = this;
        let value = this.getter.call(this.vm, this.vm);
        Dep.target = null;
        return value;
    }
    update() {
        const value = this.get();
        const oldValue = this.value;
        this.value = value;
        this.cb.call(this.vm, value, oldValue);
    }
}
function parsePath(path) {
    const segments = path.split('.');
    return function(obj) {
        for (let i = 0; i < segments.length; i++) {
            obj = obj[segments[i]];
        }
        return obj;
    };
}

四、响应式系统的优缺点

1、优点

自动更新：Vue 的响应式系统能够自动更新视图，无需手动操作 DOM。
简洁易用：通过数据劫持机制，开发者只需关注数据的变化，Vue 会自动处理视图的更新逻辑。
性能优化：Vue 只会对依赖的数据进行更新，避免了不必要的重绘和重排。

2、缺点

复杂性：实现响应式系统需要对数据劫持、依赖收集等机制有深入理解。
性能开销：对于大规模数据对象，递归遍历和依赖收集可能带来性能开销。

五、实践案例

以下是一个简单的 Vue 实例，演示了数据劫持的工作原理。

<!DOCTYPE html>
<html>
<head>
    <title>Vue Data Binding</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

在这个示例中，当用户在输入框中输入内容时，message 属性会被修改，Vue 会自动更新视图中的 <p> 标签，显示最新的 message 值。

六、总结和建议

Vue 的数据劫持机制是其响应式系统的核心，使得数据和视图能够自动同步，极大地简化了开发者的工作。然而，理解其实现原理对于深入掌握 Vue 至关重要。开发者在使用 Vue 时，应注意以下几点：

优化数据结构：尽量避免大规模嵌套对象，减少递归遍历的开销。
合理使用计算属性和侦听器：在需要进行复杂计算或异步操作时，使用计算属性和侦听器来优化性能。
理解生命周期：熟悉 Vue 组件的生命周期钩子，合理安排数据的初始化和更新操作。

通过掌握这些技巧和原理，开发者可以更高效地使用 Vue 进行开发，并解决实际项目中的问题。