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 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 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中读取照片exif信息的方法
2014/08/20 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
php防止用户重复提交表单
2015/11/02 PHP
php上传大文件设置方法
2016/04/14 PHP
php 浮点数比较方法详解
2017/05/05 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
xmlHTTP实例
2006/10/24 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
Web开发之JavaScript
2012/03/29 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
jQuery 表单序列化实例代码
2017/06/11 jQuery
基于Vue实现拖拽效果
2018/04/27 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
python字典多条件排序方法实例
2014/06/30 Python
python3.4实现邮件发送功能
2018/05/28 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
追悼会主持词
2014/03/20 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
golang内置函数len的小技巧
2021/07/25 Golang