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 相关文章推荐
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
Angular 路由route实例代码
Jul 12 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
关于element的表单组件整理笔记
Feb 05 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
python人人网登录应用实例
2014/09/26 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python实现验证码识别功能
2018/06/07 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
体操比赛口号
2014/06/10 职场文书
污水处理保证书
2015/05/09 职场文书
公司周年庆典致辞
2015/07/30 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python