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

Vue的数据劫持发生在创建Vue实例时。在Vue中，通过使用Vue构造函数来创建Vue实例，然后将数据对象传递给Vue实例的data选项。创建Vue实例后，Vue会对数据对象进行递归地遍历，将数据对象的属性转换成getter/setter，并且在数据属性被访问和修改时触发相应的更新。

这种数据劫持的机制使得Vue能够监听数据的变化，并在数据发生改变时自动更新相关的视图。当我们在模板中使用数据时，Vue会生成一个Watcher实例，用于监听数据的变化，当数据发生变化时，Watcher实例会通知到对应的视图进行更新。

通过数据劫持，Vue能够实现响应式的数据绑定。当数据发生变化时，相关的视图会自动更新，避免了手动操作视图的繁琐和错误。这种机制让我们能更方便地开发Web应用，提升了开发效率。

总结起来，Vue的数据劫持发生在创建Vue实例时，通过对数据对象的属性进行转换，实现数据的响应式绑定，让数据的变化能自动更新相关的视图。

Vue的数据劫持发生在数据初始化阶段和数据更新阶段。

1. 数据初始化阶段：当Vue实例化时，会通过Vue的构造函数将数据对象传入，Vue会遍历这个数据对象的每个属性，并使用Object.defineProperty()方法对其进行劫持。这样就能够监听数据对象的属性，并在属性发生变化时执行相应的操作。这个过程发生在Vue实例化的过程中。

2. 数据更新阶段：一旦数据发生变化，Vue会调用Vue实例中的set方法或修改属性直接赋值的方式来更新数据。在更新数据时，Vue会通过数据劫持的方式去监听数据的变化，如果数据发生变化，Vue会检测到并触发相应的更新操作，更新视图中对应的部分。

3. 响应式原理：Vue利用数据劫持来实现响应式的原理，即当数据发生变化时，Vue能够自动更新相关的视图。通过数据劫持，Vue可以监听到数据对象的属性的变化，在数据发生改变的时候，Vue会自动触发相应的更新操作，将最新的数据渲染到视图中。

4. 数据劫持的实现方式：Vue采用的是Object.defineProperty()方法来实现数据的劫持。该方法可以劫持一个对象的属性，监听属性的读取和修改操作。当属性被读取时，Vue可以做一些响应的操作，例如更新视图或触发钩子函数；当属性被修改时，Vue也可以进行相应的操作，例如更新视图或触发订阅者。

5. 对象属性的劫持：Vue对数据对象的每个属性都进行了劫持，包括对象的嵌套属性。这意味着当对象的属性被修改时，Vue会递归地触发属性的劫持，监听到对象的属性的变化，并执行相应的操作。这种劫持方式可以实现深度监测，确保数据的变化能够被及时地响应和更新。

Vue的数据劫持是在数据对象被传入Vue实例时发生的。具体来说，数据劫持是在Vue实例的初始化阶段进行的。

当创建Vue实例时，在实例化过程中会调用Vue的构造函数，在构造函数中会创建一个观察者对象，并将数据对象传递给观察者。

观察者对象会通过递归遍历数据对象的所有属性，将其转化为getter和setter，并为每个属性创建一个依赖收集器（Dep），用于收集与该属性相关的所有观察者（即订阅者）。

在属性被访问（读取）时，触发属性的getter方法，此时观察者对象会将当前订阅者（即正在执行的Watcher）添加到该属性的依赖收集器中，建立订阅者与属性之间的关联。

在属性被修改（写入）时，触发属性的setter方法，此时观察者对象会通知属性的依赖收集器，然后依次通知所有订阅该属性的订阅者进行更新操作。

总结起来，数据劫持是在Vue实例化过程中进行的，通过将数据对象转化为getter和setter来实现对属性的拦截和监听，从而实现数据的响应式更新。这使得当数据发生变化时，相关的视图会自动更新，保持UI与数据的同步。