组合式api-侦听器watch的语法

和vue2对比，也是语法上稍有不同。

监听单个数据对象

<script setup>
import {ref, watch} from "vue";

const count = ref(100)
// 语法： watch(响应式数据对象, (newVal, oldVal) => { 业务处理... }
// 只监听单个数据
// watch(count, (newValue, oldValue) => {
//   console.log(newValue, oldValue);
// })

同时监听多个数据对象

// 同时监听多个数据
const num = ref(88)
// watch([count, num], (newValue, oldValue) => {
//   // 此时的newValue和oldValue是一个数组，newValue=[新的Count值, 新的Num值]   oldValue=[原Count值, 原Num值]
//   console.log(newValue, oldValue);
// })
// 此时可以使用es6的数据解构语法（类似python的拆包）
watch([count, num], ([newCount, newNum], [oldCount, oldNum]) => {
  console.log(newCount, newNum, oldCount, oldNum)
})

监听对象类型数据中的某个值：

// 监听对象中的某个值
const obj = ref({
  username: 'zhangsan',
  age: 18
})
watch(() => obj.value.age, (newValue, oldValue) => {
  console.log('obj中的age发生了改变：', newValue)
})

deep、immediate的使用

/**
 * deep深度监听和immediate初始加载马上执行
 *  这两个属性和vue2是一样的含义，不同的地方也是在于语法使用上.
 *
 *  具体为： 直接使用第三个参数，传递options对象。
 */
watch(obj, (newVal, oldVal) => {
  console.log(newVal, oldVal);
}, {
  deep: true,
  immediate: true
})