【译】Vue 的小奇技（第十二篇）：组件建立时当即调用观察者回调

• 原文地址：Run watchers when a Vue.js component is created

• 原文做者：Alex Jover

• 译者：程序猿何大叔

特别声明：本文是做者 Alex Jover 发布在 VueDose 上的一个系列。

版权归做者全部。

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。

为了避免影响你们阅读，得到受权的记录会放在本文的最后。

正文

虽然 Vue.js 给咱们提供了在绝大多数场景下颇有用的「计算属性」，可是在一些特殊状况中，你可能须要用到「观察者属性」。

默认状况下，观察者属性的回调函数仅会在被观察的属性值发生改变时被运行，这也的确符合逻辑。

举个例子，为 dog 这个数据属性定义一个观察者回调：

export default {
  data () {
    dog: ""
  },
  watch: {
    dog (newVal, oldVal) {
      console.log(`Dog changed: ${newVal}`);
    }
  },
};
复制代码

代码到这里都没问题。若是你运行了上面这段代码，会发现 dog 的观察者回调函数在其值被改变时就会当即被调用。

然而，在一些状况下，你须要观察者的回调在组件被建立时就被调用一次。这时，你固然能够将观察者回调的内部逻辑单独抽取出来放到一个函数内，而后在观察者回调函数和 created 钩子函数中调用，可是这里有一个更简单的方法。

你可使用带选项的观察者，在配置选项中设置 immediate 属性为 true，该回调将会在组件被建立以后，被当即调用。

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

正如你所见，以这种方式设置观察者回调，须要将回调函数赋值给 handler 这个键。

你想看看在实际运用中的效果吗？访问这个 CodeSandbox 看看吧！

你能够在线阅读这篇 原文，里面有可供复制粘贴的源代码。若是你喜欢这个系列的话，请分享给你的同事们！

结语

此系列的其余文章，会同步系列官网的发布状况，及时地翻译发布到掘金。请持续关注「程序猿何大叔」，相信我会给你们带来更多优质的内容，不要忘了点赞~

若是想要了解译者的更多，请查阅以下：

• 我的博客：blog.hadesz.com
• 我的 github 仓库：github.com/hadeshe93
• 我的微信公众号：搜索「程序猿何大叔」

请求翻译受权记录

---

以为本文不错的话，分享一下给小伙伴吧~