vue3 watch函数

vue3 watch函数

watch

watch接收三个参数 监听的对象，监听的回调和监视的配置参数

watch('被监听的对象'，()=>{},{immediate:'立即监听'，deep:'深度监听'})

export default {
  setup () {
    let age = ref(18)
    let name = ref('小明')
    let obj = reactive({
      money: 100
    })
    function change () {
      obj.money += 100
      age.value++
      name.value += '-'
    }
      //情况一：监视ref所定义的一个响应式数据
      watch(age, (newValue, oldValue) => {
        console.log('age', newValue, oldValue)
      }，{immediate:true})

     //情况二：监视ref所定义的多个响应式数据
      watch([age, name], (newValue, oldValue) => {
      	console.log('age-name', newValue, oldValue)//也是数组形式返回
    	})
    
    // 情况三：监视reactive所定义的一个响应式数据的全部属性
      watch(obj, (newValue, oldValue) => {
        // 如果监听的是正规响应式对象的话
                // 1.注意：此处无法正确的获取oldValue
                // 2.注意：强制开启了深度监视（deep配置无效）
    })

    // 情况四：监视reactive所定义的一个响应式数据中的某个属性
       watch(() => obj.money, (newValue, oldValue) => {
        // [()=>person.name,()=>person.age]多参数时候也需要数组
        // 监听的参数需要以函数的形式返回才可以监听到
        //当监听的参数是深层对象，需要配置deep为true
    })
    return {
      obj,
      name,
      age,
      change
    }
  },
}

watchEffect函数

不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。 watchEffect有点像computed： - 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。 - 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

watchEffect(() => {
     let a = obj.money
     console.log('改变了')
      //默认是立即监听，当使用的数据改变时，就会触发。可以用于关联数据改变回调方法等场景
 })