【译】Vue 的小奇技(第十二篇):组件创建时立即调用观察者回调

1,395 阅读2分钟

特别声明:本文是作者 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 看看吧!

你可以在线阅读这篇 原文,里面有可供复制粘贴的源代码。如果你喜欢这个系列的话,请分享给你的同事们!

结语

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

如果想要了解译者的更多,请查阅如下:

请求翻译授权记录

请求翻译授权记录

微信公众号
觉得本文不错的话,分享一下给小伙伴吧~