本篇文章为大家展示了怎么使用vue3.0中的watch侦听器，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
前言
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
计算属性里不可以做异步操作，侦听器可以做异步操作，相当于计算属性的升级版
计算
安全
数据库
网络和加速
企业服务
<template>
<h2>watch侦听器页面</h2>
<p>普通侦听数据:{{ num }}</p>
<button @click="butFn">点击</button>
</template>script
import { ref, watch } from 'vue'
// 记得用到什么就要导入什么vue3的新特性，按需调用
setup() {
const num = ref(0)
// watch(要侦听的数据,回调函数)
watch(num, (v1, v2) => {
// v1 是改变以后的新值
// v2 是改变前的值
console.log(v1, v2)
// 要点：侦听普通函数可以获取修改前后的值，被侦听的数据必须是响应式的
})
// 单机事件
const butFn = () => {
num.value++
}
return { butFn, num }
}const num = ref(0)
const num2 = ref(20)
watch([num, num2], (v1, v2) => {
// 存入的结果是一个数组，结果返回的也是一个已数组格式的结果
// v1是最新结果的数组
// v2是旧数据的数组
console.log('v1', v1, 'v2', v2)
// 总结：可以得到更新前后的值，侦听的结果也是数组数据顺序一致
}) const obj = reactive({
msg: '奇奇怪怪可可爱爱'
})
watch(obj, () => {
// 只能获取到最新的值
console.log(obj.msg)
})总结：如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时也可以直接读取被侦听的对象，那么得到的值也是最新的。
const obj = reactive({
msg: '奇奇怪怪可可爱爱'
})
watch(() => obj.msg,(v1, v2) => {
// v1 就是被监听数据的最新值
// v2 就是被监听数据的原有值
console.log(v1, v2)
// 总结：如果侦听对象中当个属性，需要使用箭头函数的方式
// 侦听更少的数据有利于提高性能
}
) const obj = reactive({
msg: {
info: 'ooo'
}
})
watch(() => obj.msg,(v1, v2) => {
console.log(v1, v2)
},
{
// 首次渲染组件就触发一次
immediate: true,
// 开启深度监听,对象里面的数据如果发生变化也会被侦听到
// 如果监听的数据是一个比较长的表达式，那么需要用一个函数的方式
// 但是写成函数形式之后，里层的数据变化不到，所以需要添加deep选项
deep: true
}
)上述内容就是怎么使用vue3.0中的watch侦听器，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
