VUE -- Vue.js每天必学之计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用**计算属性**。
基础例子
1
2
3
|
< div id = "example" > a={{ a }}, b={{ b }} </ div > |
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var vm = new Vue({ el: '#example' , data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this .a + 1 } } }) |
这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。
1
2
3
|
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 回调。考虑下面例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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 }) |
上面代码是命令式的重复的。跟计算属性对比:
1
2
3
4
5
6
7
8
9
10
11
|
var vm = new Vue({ data: { firstName: 'Foo' , lastName: 'Bar' }, computed: { fullName: function () { return this .firstName + ' ' + this .lastName } } }) |
这样更好,不是吗?
计算 setter
计算属性默认只是 getter,不过在需要时你也可以提供一个 setter:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// ... 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 -- Vue.js每天必学之计算属性computed与$watch的更多相关文章
- Vue.js基本规则提炼总结及计算属性学习
Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
- [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别
一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...
随机推荐
- DotNETCore 学习笔记 配置
Configuration var builder = new ConfigurationBuilder(); builder.AddInMemoryCollection(); var config ...
- [bzoj2038][2009国家集训队]小Z的袜子(hose)——莫队算法
Brief Description 给定一个序列,您需要处理m个询问,每个询问形如[l,r],您需要回答在区间[l,r]中任意选取两个数相同的概率. Algorithm Design 莫队算法入门题目 ...
- bzoj 2330 SCOI2011糖果 查分约束系统
就根据题目中给的约束条件建图就行了 需要注意的是,我们要做的是最长路,因为需要约束每个点都是大于0 那么可以建一个超级源指向所有点,超级源的dis是1,边长为0 那么这样做最长路就可以了 好了我们这么 ...
- Pycharm2017汉化包下载链接
https://github.com/ewen0930/PyCharm-Chinese/tree/f5a8dc4a8f34398e81a69c69bb046aa4eff27c90 1.首先下载PyCh ...
- LeetCode 3 :Min Stack
今天做了一道MinStack的题,深深的感到自己C++还完全没有学好!!! #include <iostream> #include <stack> using std::st ...
- linux驱动学习(八) i2c驱动架构(史上最全) davinc dm368 i2c驱动分析【转】
转自:http://blog.csdn.net/ghostyu/article/details/8094049 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 预备知识 lin ...
- HDU1174(空间点到直线的距离,用叉积)
爆头 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...
- <asp:TextBox><asp:LinkButton><input button>调用后台方法后刷新页面
<asp:TextBox><asp:LinkButton>服务器控件,执行后台方法,会回调加载js,相当于页面重新加载,刷新页面 <input button>不能直 ...
- 【C++】重载
参考:黄邦勇帅 1.操作符重载函数作为类的成员和友元或者独立于类的区别: 当操作符重载函数作为类的成员函数时,操作符重载函数的参数会比作为友元或者独立于类的操作符重载函数少一个参数,因为操作符重载类成 ...
- Django-ContentType
背景:学位课.专题课.价格策略(每一种课程(学位课和专题课下可分为不同的种类的课程)在不同学习时间内的价格不同) 例如:如何将课程表与价格策略表关联起来: 用外键是可以将课程表和价格策略表关联起来的, ...