浅谈vue.watch的触发条件是什么

2023-07-12 15:39:03 175

很多人习惯用watch，但是却很少有人知道watch的真正触发条件。如果不是对vue原理了如指掌，请谨慎使用watch。

示例1，下面会触发watch吗？

会触发，因为在created方法里面重新给city赋值了一个对象，city前后的指向不同了

示例2：

不会触发，因为created方法执行之后，city的指向没有变

如果我们期望捕获这种更新，应该这样写代码：

watch:{
city:{
handler:()=>console.log('citychanged'),
deep:true
}
}

将选项deep设为true能让vue捕获对象内部的变化。

下面讨论一下watch一个数组：

那下面哪些操作会触发cities的watch回调呢?

this.cities=['Beijing','Tianjin']
this.cities.push('Xiamen')
this.cities=this.cities.slice(0,1)
this.cities.pop();
this.cities.sort((a,b)=>a.localeCompare(b));
this.cities[0]='Shenzhen'
this.cities.splice(0,1)
this.cities.length=0

答案是只有最后三行不会触发。

补充知识：vue深度watch与watch立即触发回调

基础用法

搜索框输入搜索关键字的时候，可以自动触发搜索,此时除了监听搜索框的change事件之外，我们也可以通过watch监听搜索关键字的变化。

立即触发

通过上面的代码，现在已经可以在值发生变化的时候触发加载数据了，但是如果要在页面初始化时候加载数据，我们还需要在created或者mounted生命周期钩子里面再次调用loadData方法。不过，现在可以不用这样写了，通过配置watch的立即触发属性，就可以满足了。

exportdefault{
watch:{
//在值发生变化之后，重新加载数据
searchValue:{
//通过handler来监听属性变化,初次调用newValue为""空字符串，oldValue为undefined
handler(newValue,oldValue){
if(newValue!==oldValue){
this.loadData()
}
},
//配置立即执行属性
immediate:true
}
}
}

深度监听

一个表单页面，需求希望用户在修改表单的任意一项之后，表单页面就需要变更为被修改状态。如果按照上例中watch的写法，那么我们就需要去监听表单每一个属性，太麻烦了，这时候就需要用到watch的深度监听deep

exportdefault{
data(){
return{
formData:{
name:'',
sex:'',
age:0,
deptId:''
}
}
},
watch:{
//在值发生变化之后，重新加载数据
formData:{
//需要注意，因为对象引用的原因，newValue和oldValue的值一直相等
handler(newValue,oldValue){
//在这里标记页面编辑状态
},
//通过指定deep属性为true,watch会监听对象里面每一个值的变化
deep:true
}
}
}

随时监听，随时取消，了解一下$watch

有这样一个需求，有一个表单，在编辑的时候需要监听表单的变化，如果发生变化则保存按钮启用，否则保存按钮禁用。

这时候对于新增表单来说，可以直接通过watch去监听表单数据(假设是formData),如上例所述，但对于编辑表单来说，表单需要回填数据，这时候会修改formData的值，会触发watch,无法准确的判断是否启用保存按钮。现在你就需要了解一下$watch

exportdefault{
data(){
return{
formData:{
name:'',
age:0
}
}
},
created(){
this.$_loadData()
},
methods:{
//模拟异步请求数据
$_loadData(){
setTimeout(()=>{
//先赋值
this.formData={
name:'子君',
age:18
}
//等表单数据回填之后，监听数据是否发生变化
constunwatch=this.$watch(
'formData',
()=>{
console.log('数据发生了变化')
},
{
deep:true
}
)
//模拟数据发生了变化
setTimeout(()=>{
this.formData.name='张三'
},1000)
},1000)
}
}
}

根据上例可以看到，我们可以在需要的时候通过this.$watch来监听数据变化。那么如何取消监听呢，上例中this.$watch返回了一个值unwatch,是一个函数，在需要取消的时候，执行unwatch()即可取消

以上这篇浅谈vue.watch的触发条件是什么就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

浅谈vue.watch的触发条件是什么

热门推荐

随机推荐