vue3 中的watch

接受三个参数： 参数1：监听的数据源 （可以为一个ref或者一个函数） 参数2： 回调函数 （newValue, oldValue） => {} 参数3： 深度监听或立即执行的配置（deep: true, imediate: true）

首先展示ref 监听的常规写法：

<template>
  <div>
  {{qdleader}}
      <button @click="changeData"></button>
  </div>

</template>

<script>

import {ref, toRefs, watch, reactive} from 'vue';

export default {
  setup() {
    const qdleader = ref('qdleader')
    const changeData = () => {
      qdleader.value = "我变了"
    }
    watch(qdleader,(newValue,oldValue) => {
        console.log("qdleader发生变化时候",newValue,oldValue)
      })
    return {
      qdleader,
      changeData
    }
  }
}
</script>

2.在state 的写法中怎么用呢？ 注意在这里你直接写state.qdleader是不好使的，你要写() => state.qdleader

<template>
  <div>
  {{qdleader}}
  <button @click="changeData"></button>
  </div>
</template>

<script>

import {ref, toRefs, watch, reactive} from 'vue';

export default {
  setup() {
     const state = reactive({
            qdleader:'qdleader',
            changeData: () => {
              state.qdleader = '我变了'
            }
      })

    watch(() => state.qdleader,(newValue,oldValue) => {
        console.log("qdleader发生变化时候",newValue,oldValue)
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

那什么时候用第三个参数呢？怎么用呢？

<template>
  <div>
  {{qdleader}}
  <button @click="changeData"></button>
  </div>
</template>

<script>

import {ref, toRefs, watch, reactive} from 'vue';

export default {
  setup() {
       const state = reactive({
           qdleader:'qdleader',
            a:{
              b:''
            },
            changeData: () => {
              state.a.b = '我变了'
            }
      })

    watch(() => state.a,(newValue,oldValue) => {
        console.log("qdleader发生变化时候",newValue,oldValue)
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

当我们监听对象属性时候，监听a，当a对象中的b发生变化时候，我们会发现，我们根本监听不到。

这时我们的第三个属性就闪亮登场了。

<template>
  <div>
  {{qdleader}}
  <button @click="changeData"></button>
  </div>
</template>

<script>

import {ref, toRefs, watch, reactive} from 'vue';

export default {
  setup() {
      const state = reactive({
          qdleader:'qdleader',
          a:{
            b:''
          },
          changeData: () => {
            state.a.b = '我变了'
          }
      })
      

    watch(() => state.a,(newValue,oldValue) => {
        console.log("qdleader发生变化时候",newValue,oldValue)
    },{
        deep:true, //深度监听
        imediate:true,//一进页面就监听
      })
    return {
      ...toRefs(state)
    }
  }
}
</script>

不积跬步无以至千里，你的付出不会被辜负，前端路一起加油。 扫码回复资料可以领100g前端资料，也可回复加群，加入交流群。

另有github每日更新精选面试题欢迎star github.com/qdleader/qd…