详解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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JavaScript迭代器的含义及用法
Jun 21 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
Python 下载及安装详细步骤
2019/11/04 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
毕业生自我鉴定范文
2013/11/08 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Golang map映射的用法
2022/04/22 Golang