vue什么时候建立watcher

Vue在以下几种情况下会建立Watcher：1、初始化时，2、数据属性发生变化时，3、组件生命周期钩子函数中。 Vue是一个渐进式JavaScript框架，广泛用于构建用户界面。Watcher是Vue响应式系统的核心部分，负责追踪数据的变化并更新视图。了解Vue何时建立Watcher有助于开发者更高效地使用框架，并优化应用性能。

一、初始化时

在Vue实例初始化时，Vue会遍历组件的所有数据属性，并为每个属性建立一个Watcher。这是为了确保在数据变化时，能够及时更新视图。

数据初始化： 当Vue实例被创建时，它会读取data对象，并将其转化为响应式对象。这意味着每个数据属性都被代理为Getter和Setter。
建立Watcher： 在这个过程中，Vue会为每个数据属性建立一个Watcher，以便于数据变化时，能够追踪到变化并触发相应的更新。
示例代码：

var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
});

在这个示例中，message属性会在实例初始化时被转化为响应式，并且Vue会为其建立一个Watcher。

二、数据属性发生变化时

Vue的响应式系统使得在数据属性发生变化时，Watcher会自动侦测到，并触发视图更新。

数据绑定： Vue使用双向数据绑定，当数据属性变化时，视图会自动更新。
建立新的Watcher： 如果在运行时动态添加新的响应式属性，Vue会为这些新属性建立Watcher。
示例代码：

vm.message = 'Hello World!';

当message属性的值被改变时，Watcher会侦测到这个变化，并触发视图更新。

三、组件生命周期钩子函数中

在组件的生命周期钩子函数中，Vue也会建立Watcher以侦测数据变化，并执行相应的操作。

生命周期钩子： Vue提供了一系列的生命周期钩子函数，如created、mounted、updated和destroyed等。
建立Watcher： 在这些钩子函数中，Vue会根据数据属性的变化，建立或销毁Watcher。
示例代码：

created() {
  this.message = 'Component Created!';
}

在created钩子函数中，message属性的变化会被Watcher侦测到，并触发视图更新。

四、计算属性和侦听属性

Vue还会在计算属性和侦听属性（Watchers）中建立Watcher，以便在依赖数据变化时，能够自动重新计算或触发回调函数。

计算属性： 计算属性是基于其它数据属性计算得来的值，当其依赖的属性变化时，计算属性会重新计算。
侦听属性： 侦听属性是一个特殊的Watcher，用于侦听数据属性的变化，并在变化时执行指定的回调函数。
示例代码：

var vm = new Vue({
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  },
  watch: {
    a(newValue, oldValue) {
      console.log(`a changed from ${oldValue} to ${newValue}`);
    }
  }
});

在这个示例中，sum是一个计算属性，当a或b变化时，它会重新计算。而watch属性中的函数会在a变化时执行，记录变化的值。

五、动态组件和异步组件

Vue还会在动态组件和异步组件加载时建立Watcher，以便在组件加载完成或状态变化时，能够更新视图。

动态组件： Vue允许通过<component>标签来动态渲染不同的组件。
异步组件： 异步组件是通过函数返回的Promise来动态加载的组件。
建立Watcher： 在动态组件和异步组件加载过程中，Vue会为相关数据属性建立Watcher，以便在组件状态变化时，能够及时更新视图。
示例代码：

Vue.component('async-component', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div>I am async!</div>'
    });
  }, 1000);
});
var vm = new Vue({
  data: {
    currentView: 'async-component'
  },
  template: '<component :is="currentView"></component>'
});

在这个示例中，currentView属性会在动态组件加载完成时被Watcher侦测到，并更新视图。

总结

Vue在多个不同的阶段和情况下建立Watcher，以确保数据变化能够及时反映到视图中。这些情况包括初始化时、数据属性发生变化时、组件生命周期钩子函数中、计算属性和侦听属性中，以及动态和异步组件加载时。通过理解这些机制，开发者可以更高效地使用Vue框架，并优化应用性能。建议在开发过程中，密切关注数据的变化和Watcher的建立情况，以确保应用的响应性和性能。