关于在声明周期函数中，设置的监听器销毁时机

来源：10-1 课程总结

匆匆又夏天丶

2021-06-07

老师，想问下在声明周期函数中设置的监听方法，会在组件销毁的时候自动销毁吗，我知道的是凡是绑定在组件上的事件是统一交给了vue去管理，在组件销毁的时候vue帮你自动处理，对vue api的形式调用的方式不知道vue有没有自动做这种处理

created() {
    this.unWatch1 = this.$watch(
      'query',
      debounce(300, newQuery => {
        this.$emit('update:modelValue', newQuery.trim())
      })
    )
    this.unWatch1 = this.$watch('modelValue', val => (this.query = val))
  }

是否还需要在 beforeDestroy 钩子函数中手动进行处理
如：

beforeDestroy() {
	this.unWatch1()
	this.this.unWatch2()
}

写回答

1回答

ustbhuangyi

2021-06-07

不管你是 $watch API，还是 watch options，都会创建 watcher，而 watcher 在创建的时候是会挂载到组件的 vm 实例上的

//img.mukewang.com/szimg/60be1cf809163d0009500096.jpg

然后在组件销毁的时候会自动销毁这些 watchers

$watch API 的灵活之处在于你可以随时去销毁这个 watcher 而不用等组件销毁