# watch()

watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作，使用之前需要按需导入：

import { watch } from 'vue'

// 基本用法
const count = ref(0)

// 定义 watch，只要 count 值变化，就会触发 watch 回调
// watch 会在创建时会自动调用一次
watch(() => console.log(count.value))
// 输出 0

setTimeout(() => {
  count.value++
  // 输出 1
}, 1000)

# 监视ref数据源

// 定义数据源
const count = ref(0)
// 指定要监视的数据源
watch(count, (count, prevCount) => {
  /* ... */
})

WARNING

监听一个基本数据类型
注意不要加.value 因为是基本数据类型 .value后将得到一个具体的基本类型数据值)

# 监视多个ref数据源

const count = ref(0)
const name = ref('zs')

watch(
  [count, name], // 需要被监视的多个 ref 数据源
  // (newVal,oldValue) => {  // newVal：监视的多个数据源返回的最新的数据组成的数组，oldValue:同理  。 也可以写成如下
  ([count, name], [prevCount, prevName]) => {
    console.log(count)
    console.log(name)
    console.log('-------------')
    console.log(prevCount)
    console.log(prevName)
  },
  {
    lazy: true // 第三个参数写配置项的地方
  }
)

setTimeout(() => {
  count.value++
  name.value = 'lisi'
}, 1000)

# 监视reactive数据源

// 定义数据源
const state = reactive({ count: 0 })
// 监视 state.count 这个数据节点的变化
watch(
  () => state.count,   // 监视某一个属性需要写成函数的形式
  (count, prevCount) => {
    /* ... */
  }
)

WARNING

监听全部属性

1、无法获取到oldValue,oldValue的值和newValue的值一样，但是ref的监听不存在这样的问题，使用ref去实现对象的响应式，但其实你使用ref包裹对象，底层还是调用了reactive这个函数，所以并不能解决问题
2、强制开启了深度监视，即使你设置了deep为false，也没有用示例代码如下

const person = reactive({
    name:'zhangsan',
    age:18，
    job:{
        j1:{
            salary:15
        }
    }
});
watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false})

# 监视reactive数据源的多个属性

const state = reactive({ count: 0, name: 'zs' })
watch(
  [() => state.count, () => state.name], // Object.values(toRefs(state)),
  ([count, name], [prevCount, prevName]) => {
    console.log(count) // 新的 count 值
    console.log(name) // 新的 name 值
    console.log('------------')
    console.log(prevCount) // 旧的 count 值
    console.log(prevName) // 新的 name 值
  },
  {
    lazy: true // 在 watch 被创建的时候，不执行回调函数中的代码
  }
)

setTimeout(() => {
  state.count++
  state.name = 'ls'
}, 1000)

# 清除监视

在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。如果想要明确地停止某个监视，可以调用 watch() 函数的返回值即可

// 创建监视，并得到 停止函数
const stop = watch(() => {
  /* ... */
})

// 调用停止函数，清除对应的监视
stop()

← computed() watchEffectt →