Vue学习-watch函数的用法

1.基本使用--侦听单个元素

1.导入watch函数

2.执行watch函数以及传入需要侦听的响应式数据(ref对象)和回调函数

举个例子：

代码示例：

<script setup>
//导入watch函数
import {ref,watch} from 'vue'
const count = ref(0)

const addcount=()=>{
  count.value++
}
//调用watch函数侦听变化
//ref对象不需要加.value
watch(count,(newValue,oldValue)=>{
  console.log('count变化了','新值为：'+newValue,'老值为：'+oldValue)
})

</script>
<template>
  <div>{{ count }}</div>
  <button @click="addcount">增加</button>
</template>

运行代码，打开浏览器并打开控制台，此时我们不断点击增加按钮，右边控制台就会监视出count的新值和老值。

此时我们就学会了watch最基本的侦听响应式数据了。

2.基础使用-侦听多个数据

说明：同时侦听多个响应式数据的变化，不管哪个数据变化都要执行回调。 

举个例子：

代码示例：

<script setup>
//导入watch函数
import {ref,watch} from 'vue'
const count = ref(0)
const name = ref('HH')
const addCount=()=>{
  count.value++
}

const altName=()=>{
  name.value = 'CC'
}
//watch侦听多个数据源
watch(
  [count,name],(
    //一一对应
    [newCount,newName],[oldCount,oldName])=>{
console.log('count或者name变化了','新值：'+[newCount,newName],'老值：'+[oldCount,oldName])
  }
)
</script>
<template>
  <div>{{ count }}</div>
  <div>{{ name }}</div>
  <button @click="addCount">增加</button>
  <button @click="altName">修改name</button>
</template>

还是老样子运行代码，分别点击增加和修改name,结果如下：

3.immediate

说明：在侦听创建时立即触发回调，响应式数据变化后继续执行回调

举个例子：

代码示例：

<script setup>
//引入ref和watch函数
import { ref, watch } from 'vue'
const count=ref(0)
const addCount=()=>{
  count.value++
}
watch(count,(newValue,oldValue)=>
{
  console.log('count的数值变化：',newValue,oldValue)
},
{
  //加入immedidate,值为true
  immediate:true
})
</script>
<template>
  <div>
  {{ count }}
  </div>
<button @click="addCount">增加</button>
</template>

运行查看控制台：

可以看到，此时我们并没有点击增加按钮，watch函数在创建的时候就触发了回调，在控制台打印出来。

4.deep深度侦听

说明：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象则不会触发回调执行，需要开启deep:true

举个例子：

代码示例：

<script setup>
import {ref ,watch} from 'vue'
const list=ref({count:0})
watch(list,()=>{
  console.log('数据变化了')
})
const addListCount=()=>{
  //直接修改count
  //这样直接修改属性则不会触发回调
  list.value.count++
}
</script>
<template>
{{ list.count }}
<button @click="addListCount">增加</button>
</template>

我们运行这个代码，发现无论怎么增加也不会触发watch函数里面的打印

此时我们增加 deep:true

再次点击增加就可以看到函数回调，并在控制台打印出了结果：

4.1精确侦听

说明：以上我们用的侦听示例都是基于一个响应式数据或者一个数组中只有一个数据的例子，在现实中一个数组肯定存在多个数据，但是我们侦听的时候会打印出所有的Value，这在实际学习中是是有点麻烦的，使用精确侦听就可以指定数组中的某个数据进行侦听且不显示别的数据，那么怎样才能精确的侦听到你想侦听的内容呢，下面进行举例：

精确侦听对象的某个属性

需求：在不开启deep的前提下，侦听age的变化，只有age变化时候才执行回调

代码示例：

<script setup>
import {ref ,watch} from 'vue'
const info=ref({
  name:'HH',
  age:15
})
//两个回调函数
watch(
  //第一个回调函数：想要监听的对象
  ()=> info.value.age,
  //监听的结果
  (newAge,oldAge)=> console.log('age发生变化了',newAge,oldAge)
)
//修改年龄
const altAge=()=>{
  info.value.age++
}
//修改姓名
const altName=()=>{
  info.value.name = 'YY'
}
</script>
<template>
<ul>
  <li>{{ info.name }}</li>
  <li>{{ info.age }}</li>
</ul>
<button @click="altName">修改姓名</button>
<button @click="altAge">修改年龄</button>
</template>

执行代码，我们在控制台可以看到，当我们点击修改姓名的时候控制台不会打印任何东西，但是我们点击修改年龄的时候，控制台就会打印出年龄的newAge和oldAge

tips:在我们工作的时候，deep尽量不使用，因为deep会进行递归，这样会产生性能损耗，所以尽量不使用deep，精确侦听就是最好的。