详解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 面向对象编程 万物皆对象
Sep 17 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
JavaScript async/await原理及实例解析
Dec 02 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下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
php测试kafka项目示例
2020/02/06 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python小项目之五子棋游戏
2019/12/26 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
公司寄语大全
2014/04/10 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python