vue中watch的使用方法,vue3.0 watch
本文主要介绍了手表在Vue3中的使用方法和最佳实践的相关信息。watch的功能可以监控一个值的变化，调用因为变化而需要执行的方法。您可以通过watch动态更改关联的状态。有需要的朋友可以参考一下。
目录
前言1。API 2简介。监控多个数据源3。监控阵列4。监控对象5。摘要
前言
本文以实验的形式，揭示了手表在Vue3中的最佳实践。
本文的主要目的是研究在监听响应数据时，watch是如何获得当前值和前一个值的。顺便给大家一个watch的使用教程，然后介绍如何用ref和reactive定义响应式数据，以便用watch获取当前值和上一个值。
一、API介绍
watch(WatcherSource，回调，[WatchOptions])
类型WatcherSourceT=RefT (()=T)
接口WatchOptions扩展了WatchEffectOptions {
深？boolean //默认值：false
立竿见影？boolean //默认值：false
}
参数描述：
WatcherSource:用于指定要监听的响应变量。WatcherSource可以传入ref responsive数据，reactive responsive对象应该写成函数。
Callback:执行的回调函数，可以依次接收当前值newValue和前一值oldValue作为参数。
WatchOptions:支持深层和即时。Set deep:当响应对象需要深度监控时为true默认情况下，watch是懒惰的。当我们设置immediate: true时，watch会在初始化时立即执行回调函数。
此外，vue3的手表还支持监听多个响应数据，还可以手动停止手表监测。
二、监听多个数据源
模板
div class=观察-测试
divname:{{name}}/div
divage:{{age}}/div
/div
差异
Button @click=changeName 更改名称/按钮
Button @click=changeAge 更改年龄/按钮
/div
/模板
脚本
从“vue”导入{ref，watch}
导出默认值{
姓名：家，
setup() {
Const name=ref(小松菜奈)
const age=ref(25)
const watch func=watch([姓名，年龄]，([姓名，年龄]，[先前姓名，先前年龄])={
console.log(新名称，名称，旧名称，前名称)
console.log(newAge ，Age， oldAge ，prevAge)
如果(26岁){
WatchFunc() //停止监听
}
}，{immediate:true})
const changeName=()={
Name.value=有村架纯
}
常数变化=()={
age.value=2
}
返回{
姓名，
年龄，
更改名称，
变化
}
}
}
/脚本
现象：更改姓名和年龄时，watch监测到数据变化。当年龄大于26时，我们停止监控，然后更改年龄。因为手表停了，手表的回拨功能失效。
结论：我们可以通过watch监听多个值的变化，也可以通过命名watch函数，然后执行name()函数来停止监听。
三、侦听数组
模板
div class=观察-测试
Divref定义了一个数组：{{arrayRef}}/div
Divreactive定义一个数组：{{arrayReactive}}/div
/div
差异
Button @click=changeArrayRef 更改引用定义数组中的第一项/button
button @ click= ChangeArrayReactive 更改反应定义数组/按钮中的第一项
/div
/模板
脚本
从“vue”导入{ref，reactive，watch}
导出默认值{
名称：“WatchTest”，
setup() {
const arrayRef=ref([1，2，3，4])
const arrayReactive=reactive([1，2，3，4])
//ref不深
const arrayrewatch=watch(array ref，(newValue，oldValue)={
console . log( newarrayrevatch ，newValue， oldArrayRefWatch ，oldValue)
})
//引用深度
const arrayRefDeepWatch=watch(array ref，(newValue，oldValue)={
console . log( newArrayRefDeepWatch ，newValue， oldArrayRefDeepWatch ，oldValue)
}，{deep: true})
//reactive，源码不是函数
const arrayReactiveWatch=watch(array reactive，(newValue，oldValue)={
console . log( newArrayReactiveWatch ，newValue， oldArrayReactiveWatch ，oldValue)
})
//数组监控的最佳做法——reactive且源由函数返回，返回复制的数据。
const arrayReactiveFuncWatch=watch(()=[.arrayReactive]，(新值，旧值)={
console . log( newArrayReactiveFuncWatch ，newValue， oldArrayReactiveFuncWatch ，oldValue)
})
const changeArrayRef=()={
arrayRef.value[0]=6
}
const changeArrayReactive=()={
arrayReactive[0]=6
}
返回{
arrayRef，
arrayReactive
changeArrayRef，
changeArrayReactive
}
}
}
/脚本
现象：当一个数组定义为响应式数据ref时，如果不加deep:true，watch无法监测到值的变化；用deep:true，watch可以检测到数据的变化，但是旧值和新值是一样的，也就是无法获取旧值。当数组定义为响应式对象时，无需任何处理，watch就能检测到数据的变化，但旧值与新值相同；如果watch的数据源以函数的形式编写，并通过扩展操作符克隆返回一个数组，那么在监听的同时可以获得新值和旧值。
结论：定义数组时，最好将数据定义为响应对象，这样watch监听时，只需要将数据源写成函数的形式，克隆一个数组通过扩展运算符返回，就可以在监听的同时获得新值和旧值。
四、侦听对象
模板
div class=观察-测试
divuser:{/div
div name:{ { obj reactive . user . name } }/div
divage:{ { obj reactive . user . age } }/div
div}/div
div brand:{ { obj reactive . brand } }/div
差异
Button @click=changeAge 更改年龄/按钮
/div
/div
/模板
脚本
从“vue”导入{ref，reactive，watch}
从“lodash”导入；
导出默认值{
名称：“WatchTest”，
setup() {
const obj reactive=reactive({用户：{姓名： 小松菜奈，年龄： 20}，品牌：频道 })
//无功电源是一个函数
const objReactiveWatch=watch(()=obj reactive，(newValue，oldValue)={
console.log(objReactiveWatch )
console.log(new:，JSON.stringify(newValue))
console.log(old:，JSON.stringify(oldValue))
})
//reactive，源码是函数，deep:true
const objReactiveDeepWatch=watch(()=obj reactive，(newValue，oldValue)={
console . log( objReactiveDeepWatch )
console.log(new:，JSON.stringify(newValue))
console.log(old:，JSON.stringify(oldValue))
}，{deep: true})
//对象深度监控的最佳实践——reactive且源由函数返回，函数返回深度复制后的数据。
const objReactiveCloneDeepWatch=watch(()=_。cloneDeep(objReactive)，(newValue，oldValue)={
console . log( objReactiveCloneDeepWatch )
console.log(new:，JSON.stringify(newValue))
console.log(old:，JSON.stringify(oldValue))
})
常数变化=()={
objReactive.user.age=26
}
返回{
objReactive，
变化
}
}
}
/脚本
现象：当一个对象被定义为响应对象时，它以函数的形式返回。如果不加deep:true，watch就无法监测到值的变化；用deep:true，watch可以检测到数据的变化，但是旧值和新值是一样的，即无法获取旧值；如果把watch的数据源写成一个函数，通过深度拷贝克隆返回一个对象(这里用的是lodash库的深度拷贝)，那么在监听的同时就可以获得新值和旧值。
结论：定义对象时，最好将数据定义为响应对象。这样，watch在监控的时候，只需要把数据源写成函数的形式，克隆一个对象的副本返回，就可以在监控的同时获得新值和旧值。
五、总结
1.通常，我们定义原始类型的数据(数字、字符串等。)作为ref响应数据，引用类型(数组，对象)的数据作为reactive响应数据；
2.当我们使用watch监控数据变化，需要同时获取新旧值时，需要将数据源定义为一个函数，并对数据源进行深度复制并返回。当我们只需要一个新值时，我们可以添加deep:true选项。
其实引用类型的数据定义为ref形式并不重要。你只需要将数据源定义为函数形式并对数据源进行深度复制就可以得到新旧值了~哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈但是我觉得最好的做法是将引用类型定义为反应式响应式数据。
关于Vue3中watch的用法和最佳实践指南的这篇文章到此为止。更多关于手表在Vue3中的使用方法，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。