vue2.0监听属性的用法介绍总结
我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助:
1.基础版监听:
场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了。根据需求配合监听属性我们得到下面的代码:
<template> <p id="app"> 年齡:<input type="number" v-model="age"><br> 提示信息:<span>{{infoMsg}}</span> </p> </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> <p id="app"> 年齡:<input type="number" v-model="info.age"><br> 提示信息:<span>{{infoMsg}}</span> </p> </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> <p id="app"> 年齡:<input type="number" v-model="info.age"><br> 提示信息:<span>{{infoMsg}}</span> </p> </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监听属性的用法介绍总结的详细内容,更多请关注其它相关文章!
上一篇: JS 网站性能优化笔记_PHP
下一篇: 验证码的随机生成
推荐阅读
-
CSS3 Flexbox中flex-shrink属性的用法示例介绍
-
python中string模块各属性以及函数的用法介绍
-
Laravel模型属性的隐藏属性、显示属性和临时暴露隐藏属性用法介绍
-
在css3中background-clip属性与background-origin属性的用法介绍
-
详解vue2.0监听属性的使用心得及搭配计算属性的使用
-
vue2.0之监听属性的使用心得及搭配计算属性的使用
-
CSS3 Flexbox中flex-shrink属性的用法示例介绍
-
css3中background新增的4个新的相关属性用法介绍
-
Laravel模型属性的隐藏属性、显示属性和临时暴露隐藏属性用法介绍
-
html中label标签的用法(html中label标签属性介绍)