vuedose.tips（翻译系列十二）

Run watchers when a Vue.js component is created

尽管Vue.js为我们提供了计算的属性，这些属性在大多数情况下非常有用，但在某些情况下，您可能需要使用观察程序。

默认情况下，仅当所监视的属性的值发生更改并且完全有意义时，才运行监视程序。

这是您定义属性的观察者的方法：

export default {
  data: () => ({
    dog: ""
  }),
  watch: {
    dog(newVal, oldVal) {
      console.log(`Dog changed: ${newVal}`);
    }
  }
};

到现在为止还挺好。如果您尝试该代码，则值更改后将立即调用监视功能。

但是，在某些情况下，您需要在组件创建后立即运行观察程序。您可以将逻辑移到方法中，然后从观察程序和创建的挂钩中调用它，但是有一种更简单的方法。

您可以使用监视程序的简化版本，以传递 immediate: true 选项。这样一来，它就可以在创建组件时立即运行。

export default {
  data: () => ({
    dog: ""
  }),
  watch: {
    dog: {
      handler(newVal, oldVal) {
        console.log(`Dog changed: ${newVal}`);
      },
      immediate: true
    }
  }
};

As you can see, in the long-hand way you need to set the watch callback in the handler key of the object.

Do you want to see it in action? Check it out yourself in this CodeSandbox!