vuewatch监听,vue3 watch深度监听
虽然计算属性在大多数情况下更合适，但有时需要自定义侦听器，这就是为什么Vue通过watch选项提供了一种更通用的方法来响应数据的变化。本文主要介绍vue3.0中手表监听器的相关信息，有需要的朋友可以参考一下。
目录
前言
还有vue3如何使用watch？
通过基本上监听多个响应数据来监听由reactive定义的响应数据。
使用属性配置选项监控由reactive定义的响应数据的摘要
前言
虽然计算属性在大多数情况下更合适，但有时需要自定义侦听器。这就是为什么Vue通过watch选项提供了一种更通用的方式来响应数据的变化。当数据更改时需要执行异步或昂贵的操作时，这种方法最有用。
侦听器和计算属性的区别
在calculation属性中不能做异步操作，但是监听器可以做异步操作，相当于calculation属性的升级版。
vue3如何使用watch呢？
基本使用
模板
h1观察侦听器页面/h1
p普通收听数据：{{ num }}/p
按钮@ Click= butFn Click/按钮
/模板
脚本
从“vue”导入{ ref，watch }
vue3用什么新特性记得导入，按需调用。
setup() {
const num=ref(0)
//watch(要听的数据，回调函数)
watch(num，(v1，v2)={
//v1是更改后的新值
//v2是更改前的值。
console.log(v1、v2)
//重要：修改前后的值可以通过监听普通函数获得，截取的数据必须有响应。
})
//独立事件
const butFn=()={
数值
}
return { butFn，num }
}
监听多个响应式数据
const num=ref(0)
const num2=ref(20)
watch([num，num2]，(v1，v2)={
//存储的结果是数组，返回的结果是数组格式。
//v1是最新结果的数组
//v2是旧数据的数组
console.log(v1 ，v1， v2 ，v2)
//总结：可以得到更新前后的值，截取的结果是数组数据顺序相同。
})
侦听reactive定义的响应式数据
const obj=reactive({
味精：“怪异可可爱爱情”
})
手表(obj，()={
//只能获得最新的值
控制台. log(obj.msg)
})
总结：如果你监听一个对象，那么监听器回调函数的两个参数是同一个结果，表示最新的对象数据。这时你也可以直接读取监听的对象，那么得到的值也是最新的。
监听reactive定义的响应式数据的某一个属性
const obj=reactive({
味精：“怪异可可爱爱情”
})
手表(()=obj.msg，(v1，v2)={
//v1是监控数据的最新值。
//v2是监控数据的原始值。
console.log(v1、v2)
//总结：如果监听对象中有属性，需要使用箭头函数。
//少听数据有利于提高性能
}
)
配置选项用法
const obj=reactive({
消息：{
信息：“ooo”
}
})
手表(()=obj.msg，(v1，v2)={
console.log(v1、v2)
},
{
//组件在第一次呈现时被触发一次
即时：真的，
//打开深度监控，对象中的数据有变化就会被监控。
//如果监控的数据是长表达式，需要是函数。
//但是被写成函数之后，内层的数据是不能改变的，所以需要添加deep选项。
深：真的
}
)
总结
关于vue3.0中的watch Listener示例的详细说明，本文到此为止，关于vue3.0 watch Listener的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。