【Vue3】watch 侦听器

watch 是侦听器，它可以监听指定的响应式数据的变化，并在数据发⽣改变时执⾏指定的回调函数。

watch 适⽤于需要执⾏⼀些异步或复杂操作的场景，例如：监听表单输⼊框的变化并发送 Ajax 请求，或者监听路由变化并根据路由参数切换⻚⾯。

watch 是不⽀持缓存的，只要有数据变化时，就会触发响应的操作，并且watch⽀持异步监听。

watch接受三个参数：

watch的第一个参数是：被监视的数据
watch的第二个参数是：监视的回调
watch的第三个参数是：配置对象（deep、immediate等等.....）

<template>
  <div>
    <!-- <input v-model="name1" type="text"> -->
    <hr>
    <!-- <input v-model="name2" type="text"> -->
    <hr>
    <input v-model="message.foo.bar.name" type="text">
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
let message = reactive({
  foo: {
    bar: {
      name: 'aaa',
      age: 13
    }
  }
})
// let name1 = ref<string>('aaa');
// let name2 = ref<string>('bbb');
// watch([name1, name2], (newVal, oldVal) => {
//   console.log(newVal,oldVal);
// })

// 如果是引用类型（比如直接监听上述最外层 message）（此时已开启深度监听），则返回的新值和旧值是一样的（深层也是一样的，都是新值的数值），因为是同一个对象（引用、地址不变）
// 如果要监听某个单一属性（非对象类型）的变化，需要使用回调函数（也就是转换为 proxy 代理对象的形式），否则以当前该属性类型的形式是不能监听的
watch(() => message.foo.bar.name, (newVal, oldVal) => {
  console.log(newVal, oldVal);
}, {
  deep: true,
  // 如果使用reactive，则使不使用deep都是深度监听
  // immediate: true // 开启后直接先执行一次回调函数
  // flush: 'pre' // 控制 watch 执行的时机： pre 组件更新之前执行，sync 同步执行，post 组件更新之后执行
})
</script>

<style lang="scss" scoped></style>

watch 最后返回停止监视的函数unwatch。所以可以在不需要的时候调用自身以停止监听：

const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
    if(newValue >= 10){
      stopWatch()
    }
  })

---

watch 和 computed 的区别：

计算属性 computed :

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }

侦听属性watch：

1. 不支持缓存，数据变，直接会触发相应的操作；
2. watch支持异步；
3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
   • immediate：组件加载立即触发回调函数执行，
   • deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。

watch: {
    // 每当 question 改变时，这个函数就会执行
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  },
watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
      },
      deep: true
    }
  }

---

Vue2 中的 watch：

1.简单写法

watch: {
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

2.完整写法

watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视(针对复杂类型)
    immediate: true, // 是否立刻执行一次handler
    handler (newValue) {
      console.log(newValue)
    }
  }
}