vue侦听器watcher的immediate选项

比较常见的场景,在初始化钩子中需要执行一段方法,当数据变动时,需要再次执行这个方法,例如搜索功能。

export default {
  data() {
    return {
      input: ""
    };
  },
  created() {
    this.getSearchResults();
  },
  methods: {
    getSearchResults() {
      // handle search
    }
  },
  watch: {
    input() {
      this.getSearchResults();
    }
  }
};

虽然可以实现功能,其实可以更精简。

vue 的 watcher 中可以指定immediate: true选项,表示组件创建时立即执行。那么,可以对 watcher 进行改写。

watch: {
  input: {
    handler() {
      this.getSearchResults();
    },
    immediate: true,
  }
}

这时,就不需要在created钩子中再次调用了。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注