详解vue2.0监听属性的使用心得及搭配计算属性的使用
我们在工作中常常需要监听某一个属性值的变化，这个时候我们就需要用到了监听属性watch，在这里我总结watch属性的三种场景使用希望对你有所帮助：
1.基础版监听：
场景如下：输入框输入你的年龄，如果年龄在0-15岁提示信息：你还是个小孩，如果年龄在 15-25岁，提示信息：你已经是个少年，如果年龄在25岁以上，提示信息：你已经长大了。根据需求配合监听属性我们得到下面的代码：
<template>
<div id="app">
年齡：<input type="number" v-model="age"><br>
提示信息：<span>{{infoMsg}}</span>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
infoMsg:""
}
},
watch:{
age:function(val,oldval){
if(val>0 && val<15){
this.infoMsg="你还是个小孩"
}else if(val>15 && val<25){
this.infoMsg="你已经是个少年"
}else{
this.infoMsg="你已经长大了"
}
}
}
}
</script>
这里需要特别说明一下的是：坚挺属性方法中的两个参数分别代表的含义：第一个val是当面正在监听的属性的值，oldval是属性改变之前的值，由于这是形参的原因，参数的名字可以自己定义，但是但是参数所代表的含义是不会变化的。
2.进阶版监听：
下面我们改变一下需求：基础规则不变，但是因为后台数据库的更改（画个圈圈咀咒他）我们需要提交一个这样的数据结构
data() {
return {
info: {
age: ""
},
infoMsg: ""
};
},
由于我们监听的是对象info中的属性age值的变化，所以我们需要使用到的是深度监听，具体代码如下：
<template>
<div id="app">
年齡：<input type="number" v-model="info.age"><br>
提示信息：<span>{{infoMsg}}</span>
</div>
</template>
<script>
export default {
data() {
return {
info: {
age: ""
},
infoMsg: ""
};
},
watch: {
info: {
handler: function(val, oldval) {
var that = this;
if (val.age > 0 && val.age < 15) {
that.infoMsg = "你还是个小孩";
} else if (val.age > 15 && val.age < 25) {
that.infoMsg = "你已经是个少年";
} else {
that.infoMsg = "你已经长大了";
}
},
deep: true
}
}
};
</script>
在这里需要注意的有两点：1，这里的function不能使用箭头函数替代，如果使用箭头函数的话，this的指向会是全局。2，你会注意到这里多加入一个属性是deep，它的含义表示是否开启深度监听，如果开启值为true，反之为false。
3.最高级监听：
针对第二个案例不知道你有没有发现一个问题：我们监听的是一个对象里面某个属性的变化，但是如果当这个对象里面有很多个值的时候，虽然也可以使用第二种方法进行监听，但是这将会是对资源的一种极大的浪费，身为一个严谨的程序员（微笑脸），绝对不能允许这样的事情发生，所以我们可以结合computed（计算属性）对上面的代码进行优化：
<template>
<div id="app">
年齡：<input type="number" v-model="info.age"><br>
提示信息：<span>{{infoMsg}}</span>
</div>
</template>
<script>
export default {
data() {
return {
info: {
age: "",
name: "",
hobit: ""
},
infoMsg: ""
};
},
computed: {
ageval: function() {
return this.info.age;
}
},
watch: {
ageval: {
handler: function(val, oldval) {
var that = this;
if (val > 0 && val < 15) {
that.infoMsg = "你还是个小孩";
} else if (val > 15 && val < 25) {
that.infoMsg = "你已经是个少年";
} else {
that.infoMsg = "你已经长大了";
}
},
deep: true
}
}
};
</script>
通过上面的我们看出，这次我们监听的是计算属性ageval，而计算属性返回的则是info对象中age的值，与第二次的代码进行比较我们可以发现两次代码中监听的一个是对象info，一个是info对象中age的值，性能大大增强，这就是我们期待的结果了。
总结
以上所述是小编给大家介绍的vue2.0监听属性的使用心得及搭配计算属性的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
今天小编就为大家分享一篇浅谈Vue.js之初始化el以及数据的绑定说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了基于Vue实现拖拽效果,文中给大家介绍了clientY pageY screenY layerY offsetY的区别讲解，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了如何使用vue-router插件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
element-ui el-dialog嵌套table组件,ref问题及解决
这篇文章主要介绍了element-ui el-dialog嵌套table组件,ref问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做会使Vue变得非常快,下面这篇文章主要给大家介绍了Vue基础教程之条件渲染和列表渲染的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要为大家详细介绍了基于Vue技术实现递归组件的方法 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
今天小编就为大家分享一篇Vue2 监听属性改变watch的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue实现上传图片添加水印的升级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue实现图片路径转二进制文件流(binary)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue中的slots/scoped slots,本文实例代码相结合的形式给大家介绍了slots的工作原理，需要的朋友可以参考下2018-04-04
最新评论