监听器watch

监听器用于监听响应式数据。当响应式数据发生了改变可以进行相应的操作。

监听ref

下面代码作用：当每次num的值改变时就打印一下新的值

<template>
  <div id="d">
    num
    <button @click="num++">{{num}}</button>
  </div>
</template>

<script setup>
import {ref,reactive, watch} from 'vue'
const num=ref(0);
const obj=reactive({});

watch(num,(newX)=>{
  console.log('新的值为',newX);
})
</script>
<style></style>

监听reactive对象

不能直接监听响应式对象的属性值

const obj = reactive({ count: 0 })
// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

要用一个返回该属性的getter函数

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

深层监听

当给watch传入一个响应式对象，会自动创建一个深层的监听器，对象内所有的属性发生改变都会触发回调函数。

<template>
  <div id="d">
    <button @click="obj.count++">{{obj.count}}</button>
    <!-- 数值发生改变也会触发 -->
  </div>
</template>

<script setup>
import {ref,reactive, watch} from 'vue'
const obj = reactive({ count: 0,name: '' })
watch(obj, (newValue,oldValue) => {
  console.log(newValue,oldValue)
})
obj.name='jack'; //名字发生改变会触发
</script>
<style></style>

obj里面的属性发生了改变都会触发watch监听器。

当obj.name改变时触发了watch，这时打印newValue和oldValue，这两个是一样的，他们都是obj对象。

其实我们也可以手动的把watch变为深层监听，加多一个deep

watch(value,()=>{
    
},{deep:true})

立即监听

上面监听器只有在数据发生改变时才会监听，但有时候我们希望在一开始就监听数据的变化，执行某些操作。这时可以加上immediate:true实现立即监听，即页面一被渲染就开始监听。

<template>
  <div id="d">
    <button @click="obj.count++">{{obj.count}}</button>
  </div>
</template>

<script setup>
import {ref,reactive, watch} from 'vue'
const obj = reactive({ count: 0,name: '' })
watch(obj, (newValue,oldValue) => {
  console.log(newValue,oldValue)
},{immediate:true}) //立即监听
</script>
<style></style>

现在我没有改变数据，但是页面渲染完后就实现了监听。

newValue为obj对象，oldValue是undefined.

}) //立即监听

现在我没有改变数据，但是页面渲染完后就实现了监听。

newValue为obj对象，oldValue是undefined.

![](https://img-blog.csdnimg.cn/img_convert/0d91b9a52d62553e49cd475764dcd44c.png)