vue什么时候建立observer

Vue框架建立Observer的时机是在创建Vue实例时。当我们使用new Vue()来创建一个Vue实例时，Vue会在内部调用_init()方法进行初始化。在初始化过程中，Vue会调用initState()方法，该方法中会调用initData()方法来初始化data属性。在initData()方法中，会使用observe()函数来将data属性转化为响应式数据。

observe()函数的作用是将一个对象转化为响应式的对象，它会遍历对象的属性，并使用Object.defineProperty()方法为每个属性设置getter和setter函数。这样，在访问或修改这些属性时，Vue框架可以得到通知，从而更新相关的视图。

总结来说，Vue在创建实例过程中会在初始化数据阶段调用observe()函数将data属性转化为响应式数据，从而实现数据的双向绑定效果。

在Vue中，Observer（观察者）是用来监听数据变化并立即更新视图的核心机制。Vue在什么时候建立Observer呢？下面是关于Vue中Observer建立的五个时机：

1. 初始化时：当Vue实例被创建时，会通过调用new Vue()来初始化，其中会初始化data选项中的数据并将其转换为响应式的数据。Vue会遍历data中的每个属性，通过Object.defineProperty()将其转换为getter和setter，从而实现对属性的劫持和监听。

2. 通过Vue.set()或this.$set()方法添加新属性时：当在Vue实例中需要给已有的对象添加新属性时，需要使用Vue.set()或this.$set()方法来添加。这是因为添加新属性时需要手动通知Vue进行监听。

3. 数组变化时：对于数组，Vue提供了一些可以改变数组的方法（如push、pop、shift、unshift、splice、sort、reverse），当使用这些方法改变数组时，Vue会捕获并触发更新。这是因为Vue通过重写这些数组方法，在执行前后添加了额外的逻辑，用来实现以响应式的方式追踪数组的变化。

4. 计算属性中用到的属性发生改变时：Vue中的计算属性是根据依赖的响应式属性进行计算得到的属性。当计算属性中的依赖属性发生变化时，会触发计算属性的重新计算。在计算属性的get函数内部，Vue会将计算属性本身加入到依赖属性的订阅列表中，一旦依赖属性发生变化，Vue会通知计算属性进行重新计算。

5. 挂载组件时：当Vue组件被挂载到DOM中时，Vue会对组件中使用的数据进行首次渲染，并将这些数据转换为响应式的。同时，Vue也会对DOM元素上的指令进行解析和绑定，并为相关的数据添加对应的观察者，使其能够实时反映数据的变化。

综上所述，Vue在初始化时、添加新属性、数组变化、计算属性依赖变化以及组件挂载时建立Observer来实现数据的响应式。这些时机保证了当数据发生变化时，Vue能够立即更新视图，实现了数据与视图的同步更新。

在Vue中，observer会在以下情况下被建立：

1. 初始化Vue实例：当创建一个新的Vue实例时，Vue会对其传入的data进行观察并建立相应的observer。

2. 添加新的属性：如果在实例化Vue之后，向data对象中添加新的属性，这些新属性将不会被观察。这是因为Vue只会对在实例化时已经存在的属性进行观察。为了让新属性也被观察，需要使用Vue提供的Vue.set或者this.$set方法手动添加该属性并建立observer。

3. 数组变动：当使用数组方法（例如push，pop，shift，unshift，splice，sort，reverse）修改数组时，会被Vue自动探测到，并调用其内部实现的重写方法进行观察。这样可以实时更新视图。

4. 对象属性变动：对于已经存在的对象属性，当给它赋一个新的值时，被赋的新值会被观察。但是如果直接给对象赋一个新的对象，该对象是不会被观察的。为了保证新对象也能被观察，可以使用Vue提供的Vue.set或者this.$set方法进行赋值。

5. 嵌套属性变动：如果data对象中的属性值也是一个对象或者数组，那么该属性也会被观察。这样可以实现深层次的数据变化检测。

需要注意的是，Vue不支持对新增的根级别属性进行响应式处理。也就是说，如果在实例化之后直接给Vue实例添加一个新的属性，那么该属性将不会被观察。为了解决这个问题，Vue提供了Vue.set或者this.$set方法来添加新的响应式属性。