Vue中watch的详细用法
【摘要】
watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。
简单来说就是，vue是数据双向绑定，当页面数据发生变化时，我们通过watch可以拿到变化前和变化后的值，之后做一系列操作，下面我们通过例子来解释。
1.监听单个值变化
<template>&nbs...
watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。
简单来说就是，vue是数据双向绑定，当页面数据发生变化时，我们通过watch可以拿到变化前和变化后的值，之后做一系列操作，下面我们通过例子来解释。
1.监听单个值变化
-
<template>
-
<div>
-
<el-input v-model="demo"></el-input>
-
<div>{{value}}</div>
-
</div>
-
</template>
-
<script>
-
export default {
-
name: 'index',
-
data() {
-
return {
-
demo: '',
-
value: ''
-
};
-
},
-
watch: {
-
demo(val,oldVal) {
-
this.value = this.demo;
-
}
-
}
-
};
-
</script>
这个比较简单，我们用到了两个变量，demo和value，这里演示重点是value值是怎么变化的，我们监听的demo，这个demo通过v-model绑定到input，当input内容改变时，我们就把input里的值赋值到value。但是这个写法有个弊端，就是首次绑定不会执行监听函数，有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
上面写法可以替换成
-
<template>
-
<div>
-
<el-input v-model="demo"></el-input>
-
<div>{{value}}</div>
-
</div>
-
</template>
-
<script>
-
export default {
-
name: 'index',
-
data() {
-
return {
-
demo: '',
-
value: ''
-
};
-
},
-
watch: {
-
demo:{
-
handler(val,oldVal) {
-
this.value = this.demo;
-
},
-
immediate: true
-
}
-
}
-
};
-
</script>
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
2.监听单个值变化，不同的是监听对象里面的
-
<template>
-
<div>
-
<el-input v-model="demo.name"></el-input>
-
<div>{{value}}</div>
-
</div>
-
</template>
-
<script>
-
export default {
-
name: 'index',
-
data() {
-
return {
-
demo: {
-
name:'',
-
age:'',
-
},
-
value: ''
-
};
-
},
-
watch: {
-
'demo.name'(val,oldVal) {
-
this.value = this.demo;
-
}
-
}
-
};
-
</script>
这个和第一个例子实现的效果是同样的，但是区别在于绑定的是对象里的属性，
3.监听对象
-
<template>
-
<div>
-
<el-input v-model="demo.name"></el-input>
-
<div>修改前的名字：{{name}}</div>
-
<div>修改后的名字：{{oldName}}</div>
-
</div>
-
</template>
-
<script>
-
export default {
-
name: 'index',
-
data() {
-
return {
-
demo: {
-
name:'',
-
age:'',
-
},
-
name: '',
-
oldName: '',
-
};
-
},
-
watch: {
-
demo: {
-
handler:function(val,oldval){
-
this.name = val.name
-
this.oldName = oldVal.name
-
},
-
deep:true//对象内部的属性监听，也叫深度监听
-
}
-
}
-
};
-
</script>
这种监听方式，监听了对象的所有属性，这样的方法对性能影响很大，修改里面任何一个属性都会触发这个监听器里的 handler。
文章来源: blog.csdn.net，作者：NMGWAP，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/NMGWAP/article/details/125067178
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）