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

<div id="box">
a={{a}},b={{b}}
</div>
new Vue({
data:{
a:1
},
computed:{
b:function(){
return this.a + 1
}
}
}).$mount("#box");

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

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

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

计算属性 vs. $watch

计算属性 vs. $watch

计算属性 vs. $watch

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

<div id="box">
{{fullName}}
</div>
var vm=new Vue({
el:"#box",
data:{
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
});
//使用$watch
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
}) vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
});

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

var vm = new Vue({
el: '#demo',
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 也会有相应更新。

关于计算属性背后的原理和技术细节详见计算属性的奥秘

总结 :

计算属性:用于简单场合,比如计算,合并字符串等;

watch属性:用于耗时的,可以异步的获取远程服务上的数据这样的操作。

参考资料:

http://cn.vuejs.org/v2/guide/reactivity.html#main

http://cn.vuejs.org/v2/guide/computed.html

https://github.com/zuobaiquan/Vue/tree/master/01vue%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86

Vue中的计算属性与$watch的更多相关文章

  1. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue中的计算属性和监听器(computed 与 watch)

    react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...

  3. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

  4. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  5. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  6. Vue中的计算属性

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函 ...

  7. 简述Vue中的计算属性

    1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...

  8. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  9. vue中computed计算属性与methods对象中的this指针

    this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...

随机推荐

  1. 设置centos7默认运行级别

    1.查看当前运行级别 systemctl get-default 2.设置命令行运行级别 systemctl set-default multi-user.target 3.设置图形化运行级别 sys ...

  2. PostgreSQL: Query for location of global tablespace?

    Q: I have been trying to make our database clients pro-active about not filling up the partition on ...

  3. IE的Cookie目录和临时缓存目录的关系

    1.IE的Cookie位置注册表设置: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Shell Folde ...

  4. Asp.Net集群中Session共享

    今天遇到了这个问题,于是研究了一下.要解决这个问题,首先就要明白一些Session的机理.Session在服务器是以散列表形式存在的,我们都知道Session是会话级的,每个用户访问都会生成一个Ses ...

  5. 理解Object.defineProperty的作用

    对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj = new Object; //obj = {} obj.name = ...

  6. BZOJ2820:YY的GCD

    Sol 推导:\(n<m,p为质数\) \(ans=\sum_p\sum_{i=1}^{\frac{n}{p}}\mu(i)\frac{n}{pi}\frac{m}{pi}\) \(=\sum_ ...

  7. HTML DOM innerHTML 属性及实现图片连续播放

    定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 语法 tablerowObject.innerHTML=HTML 实例 下面的例子返回了表格行的 inner H ...

  8. linux系统调用之进程控制

    1 进程控制: fork                                                                                     创建一 ...

  9. Emgu.CV 播放视频-本地文件/RTSP流

    using Emgu.CV; using System; using System.Drawing; using System.Threading; using System.Windows.Form ...

  10. jquery里面的$.each()方法

    $.each可以迭代jquery对象和数组 $(selector).each()专注于jquery对象的遍历