我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性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之监听属性的使用心得及搭配计算属性的使用的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历

    今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...

  3. vue2.0 添加监听滚动事件

    export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...

  4. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

  5. 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  6. Android 5.0 以上监听网络变化

    大家好,大概有一个多月没有更新博客了,我是干什么去了呢?很明显,程序员当然要加班……这一次跟大家分享一下新项目的一些心得. 监听网络变化在开发中是经常用到的,例如我们断网有一些友好的提示,或者根据不同 ...

  7. swift4.0 方法监听Selector写法总结

    import UIKit class MainViewController: UITabBarController { //MARK:属性 懒加载 lazy var composeBtn = UIBu ...

  8. cocos2d-js 3.0 RC0 监听返回键、菜单键、进入后台(home键)、恢复显示等事件

    cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyReleased: function(keyCode, eve ...

  9. vue 2.0 watch 监听对象的变化

随机推荐

  1. python的基础数据类型

    Python基础数据类型 定义: int    => 数字类型 str   => 字符串数据类型 bool  =>布尔值,True False list 列表,用来存放大量数据  [ ...

  2. 源码剖析Linux epoll实现机制及Linux上惊群

    转载:https://blog.csdn.net/tgxallen/article/details/78086360 看源码是对一个技术认识最直接且最有效的方式了,之前用Linux Epoll做过一个 ...

  3. avalon教程-简介

    avalon是什么? avalon是一个MVVM框架, Modle-模型层,即为js中从后台接口中取出的数据,例如一个对象或者对象数组,并对这些数据进行一定的格式化.常见的返回数据是这样的{id : ...

  4. 使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载

    使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载 2018年06月07日 10:42:26 守望dfdfdf 阅读数:235 标签: jav ...

  5. cf914F. Substrings in a String(bitset 字符串匹配)

    题意 题目链接 Sol Orz jry 和上一个题一个思路吧,直接bitset乱搞,不同的是这次有了修改操作 因为每次修改只会改两个位置,直接暴力改就好了 #include<bits/stdc+ ...

  6. Windows环境下sublime text 3搭建前端开发环境

    一.安装SubLime Text 3 SubLime Text 3官网下载:https://www.sublimetext.com/ 二.安装Package Control 进入sublime后,按快 ...

  7. table表格td内内容自动换行

    项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...

  8. ASP.NET MVC 音乐商店 - 3. 视图与模型

    上一篇中使用字符串,这一篇我们就开始使用视图来处理. 我们已经可以从控制器的 Action 中返回一个字符串,这可以帮助我们更好地理解 Controller 是如何工作的.但是对于创建一个 Web 程 ...

  9. spring mvc踩坑记

    前言 主要介绍自己在学习spring mvc过程中踩到的一些坑,涉及到当时遇到这个错误是如何思考的,对思路进行总结,下次遇到类似的错误能够提供一些思路甚至快速解决. 环境准备 jdk8,spring4 ...

  10. mysql5.1安装图解教程

    mysql5.1安装图解教程 曾经为了要搭建模拟平台,从内地网站学习到台湾网站,其中必不可少的一项就是MySQL,那时候正好普遍用5.1,所以也很习惯用MySQL5.1版本! 下面就以MySQL5.1 ...