Vue.js每天必学之计算属性computed与$watch


Posted in Javascript onSeptember 05, 2016

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用**计算属性**。

 基础例子

<div id="example">
 a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
 el: '#example',
 data: {
 a: 1
 },
 computed: {
 // 一个计算属性的 getter
 b: function () {
 // `this` 指向 vm 实例
 return this.a + 1
 }
 }
})

这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

你可以打开浏览器的控制台,修改 vm。vm.b 的值始终取决于 vm.a 的值。

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a,因此当 vm.a 发生改变时,依赖于 vm.b 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系:计算属性的 getter 是干净无副作用的,因此也是易于测试和理解的。

计算属性 vs. $watch

Vue.js 提供了一个方法 $watch,它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时, $watch 很诱人 —— 特别是如果你来自 AngularJS。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。考虑下面例子:

<div id="demo">{{fullName}}</div>

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})

vm.$watch('firstName', function (val) {
 this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
 this.fullName = this.firstName + ' ' + val
})

上面代码是命令式的重复的。跟计算属性对比:

var vm = new Vue({
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
 return this.firstName + ' ' + this.lastName
 }
 }
})

这样更好,不是吗?

计算 setter

计算属性默认只是 getter,不过在需要时你也可以提供一个 setter:

// ...
computed: {
 fullName: {
 // getter
 get: function () {
 return this.firstName + ' ' + this.lastName
 },
 // setter
 set: function (newValue) {
 var names = newValue.split(' ')
 this.firstName = names[0]
 this.lastName = names[names.length - 1]
 }
 }
}
// ...

现在在调用 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会有相应更新。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 #Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 #Javascript
Vue.js每天必学之数据双向绑定
Sep 05 #Javascript
JS快速实现移动端拼图游戏
Sep 05 #Javascript
jQuery实现的tab标签切换效果示例
Sep 05 #Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 #Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 #Javascript
You might like
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python requests库的使用
2021/01/06 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
总经理助理岗位职责
2013/11/08 职场文书
企业给企业的表扬信
2014/01/13 职场文书
政治表现评语
2014/05/04 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
PHP设计模式(观察者模式)
2021/07/07 PHP
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技