详解vue2.0监听属性的使用心得及搭配计算属性的使用


Posted in Javascript onJuly 18, 2018

我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性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监听属性的使用心得及搭配计算属性的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS实现图片预加载无需等待
Dec 21 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
利用javaScript处理常用事件详解
Apr 14 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 #Javascript
使用Vue实现图片上传的三种方式
Jul 17 #Javascript
vue的token刷新处理的方法
Jul 17 #Javascript
vue 权限认证token的实现方法
Jul 17 #Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 #Javascript
详解webpack import()动态加载模块踩坑
Jul 17 #Javascript
vue-router中的hash和history两种模式的区别
Jul 17 #Javascript
You might like
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python编程之event对象的用法实例分析
2017/03/23 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python安装gdal的两种方法
2019/10/29 Python
python递归函数用法详解
2020/10/26 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
linux面试题参考答案(4)
2013/01/28 面试题
《望洞庭》教学反思
2014/02/16 职场文书
员工生日活动方案
2014/08/24 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
尼克胡哲观后感
2015/06/08 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
JavaScript中reduce()的用法
2022/05/11 Javascript
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang