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

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钩子中再次调用了。

相关文章:

• vue开发者工具不出现
• vue中@hook使用技巧
• vue是如何对数组方法进行变异的
• v-deep选择器
• vue组件上如何监听原生事件