Vue3 学习笔记（十一）——倾听器watch

合集 - Vue3知识(12)

1.VUE3 学习笔记（一）——Vue3介绍2023-02-272.VUE3 学习笔记（二）——开发环境安装与部署项目2021-12-083.VUE3 学习笔记（三）——Nodejs版本升级、降级与版本共存2022-05-244.VUE3 学习笔记（四）——目录介绍2022-01-215.VUE3 学习笔记（五）——页面启动逻辑分析2023-02-276.Vue3 学习笔记（六）——Vue应用的使用2023-02-277.Vue3 学习笔记（七）——模板2023-04-188.Vue3 学习笔记（八）——Vue语法2023-04-189.Vue3 学习笔记（九）——Vue组件的使用2023-04-1810.Vue3 学习笔记（十）——生命周期2023-04-25

11.Vue3 学习笔记（十一）——倾听器watch2023-05-03

12.Vue3 学习笔记（十二）——插件Plugins2023-05-07

收起

  计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

1、watch简单示例

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      answer: 'Questions usually contain a question mark. ;-)'
    }
  },
  watch: {
    // whenever question changes, this function will run
    question(newQuestion, oldQuestion) {
      if (newQuestion.indexOf('?') > -1) {
        this.getAnswer()
      }
    }
  },
  methods: {
    async getAnswer() {
      this.answer = 'Thinking...'
      try {
        const res = await fetch('https://yesno.wtf/api')
        this.answer = (await res.json()).answer
      } catch (error) {
        this.answer = 'Error! Could not reach the API. ' + error
      }
    }
  }
}
</script>

 1）命令式创建侦听器$watch()

export default {
  created() {
    this.$watch('question', (newQuestion) => {
      // ...
    })
  }
}

 2）改变侦听器watch的响应时刻（Vue 组件更新之前响应->Vue 组件更新之后响应）

    默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：

export default {
  // ...
  watch: {
    key: {
      handler() {},
      flush: 'post'
    }
  }
}

2、watch深层侦听器deep用法

  watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。如果想侦听所有嵌套的变更，你需要深层侦听器：

export default {
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
      },
      deep: true  // 声明为深层
    }
  }
}

  注：深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能，谨慎使用。

3、watch即时回调的侦听器immediate用法

  watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。

export default {
  // ...
  watch: {
    question: {
      handler(newQuestion) {
        // 在组件实例创建时会立即调用
      },
      // 强制立即执行回调
      immediate: true
    }
  }
  // ...
}

4、手动停止侦听器watch

  用 watch 选项或者 $watch() 实例方法声明的侦听器，会在宿主组件卸载时自动停止。因此，在大多数场景下，你无需关心怎么停止它。手动停止得实例如下：

const unwatch = this.$watch('foo', callback)

// ...当该侦听器不再需要时，停止
unwatch()  // 写在方法里