Vue3（监视器watch）
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3（监视器watch）相关的知识，希望对你有一定的参考价值。
监视器(watch)是用来监视数据的变化,对数据进行监控定义监视器的俩种方式:
第一种：
再Vue实例内部通过watch选项
Vue.createApp({
watch:{
变量:function(newValue,oldValue){},//监控方法
变量:{
handler:function(newValue,oldValue){},监控方法
deep:true,//开启深度监视
immediate:true//开启初始化触发
}
}
})
第二种：
通过Vue实例的$watch()方法
var unwatch = vm.$watch(变量,监控方法,[options]);//返回一个取消监视函数
具体操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
<input type="text" v-model="name"/>
<p>{{ user.password }}</p>
<input type="text" v-model="user.password">
</div>
<script>
const vm=Vue.createApp({
data(){
return{
name:'htt',
user:{
id:1001,
username:admin,
password:'123'
}
}
},
//方式一：通过watch选填
watch:{
name:function(newValue,oldValue){
console.log('name被修改，原值：${oldValue},新值:${newValue}')
},
// //当user的passord变化的时候，可以监视出来
// user:{
// handler:function(){
// },
// deep:true,//开启深度监视，当对象中的属性发生变化时也会监视
// immediate:true //立即触发
// }
'user.password':function(newValue,oldValue){
console.log('user.password被修改，原值:${oldValue},新值:${newValue}')
}
}
}).mount("#app")
// //方式2监视普通属性和对象，但是对对象的某个属性无法监视
let unwatch=vm.$watch('user',function(newValue){
console.log('user被修改',newValue)
//取消监视
if(newValue.password==='000000'){
unwatch()//回调函数，取消监视
}
},
{
deep:true,
immediate:true
})
// 监视器(watch)是用来监视数据的变化,对数据进行监控定义监视器的俩种方式:
// 再Vue实例内部通过watch选项
// Vue.createApp({
// watch:{
// 变量:function(newValue,oldValue){},//监控方法
// 变量:{
// handler:function(newValue,oldValue){},监控方法
// deep:true,//开启深度监视
// immediate:true//开启初始化触发
// }
// }
// })
// 通过Vue实例的$watch()方法
// var unwatch = vm.$watch(变量,监控方法,[options]);//返回一个取消监视函数
</script>
</body>
</html>
以上是关于Vue3（监视器watch）的主要内容，如果未能解决你的问题，请参考以下文章
vue3 watch监听 （immediate / deep / watchEffect）