Vue.js每天必学之计算属性computed与$watch
字体：[ ] 类型：转载 时间：
Vue.js每天必学之计算属性computed与$watch，为大家详细讲解计算属性computed与$watch，感兴趣的小伙伴们可以参考一下
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用**计算属性**。
&div id="example"&
a={{ a }}, b={{ b }}
var vm = new Vue({
el: '#example',
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。
console.log(vm.b) // -& 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',
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({
firstName: 'Foo',
lastName: 'Bar'
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
这样更好，不是吗？
计算 setter
计算属性默认只是 getter，不过在需要时你也可以提供一个 setter：
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
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组件的教程，请大家点击专题进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，在vue.js官方文档中看到computed和watch获取全名的一个例子：
var var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
var var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar'
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
菜鸟表示不太懂他们之间的区别，难道watch就不可以像computed那样来获取吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
更具可读性，以及通常来说更少的代码。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用computed代码写的少，没什么主要区别
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，在vue.js官方文档中看到computed和watch获取全名的一个例子：
var var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
var var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar'
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
菜鸟表示不太懂他们之间的区别，难道watch就不可以像computed那样来获取吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用computed代码写的少，没什么主要区别
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
更具可读性，以及通常来说更少的代码。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我觉得还是有区别的，而且两种应用的情形应该区分开。
计算属性是计算属性，观察是观察。
计算属性顾名思义就是通过其他变量计算得来的另一个属性，fullName在它所依赖firstName，lastName这两个变量变化时重新计算自己的值。
另外，计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。
而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以检测页码执行获取数据的函数。
可以再详细的查看一下文档：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
简单来看computed是基于缓存进行的，watch等于一个函数。个人觉得会用就行了，具体区别移驾
觉得还是计算属性用的能广泛一些吧
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
watch应该是更底层的实现，computed在其上创建，每更新任何一个属性都会触发这个属性的watch，以及一次computed
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在写法上有一个区别。computed返回state处理后结果，watch是赋值行为，修改state。
正如文档建议说 执行异步操作或开销较大的操作时使用watch。
执行异步操作不能串行返回结果，使用watch。
开销较大的操作，避免堵塞主线程，使用watch。
简单且串行返回的，使用computed
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
并不是，作用不一样。
computed是用于定义基于数据之上的数据。
而watch是你想在某个数据变化时做一些事情，如果做的事情是更新其他数据，那其实与把这个要更新的数据项定义成computed是一样的，这个时候用computed更有可读性，虽然技术上讲watch也可以实现。
但你也可以在被watch的数据变化时做其他事情啊，比如调用一个方法，这个是computed做不到也不应该做的。
1.如果一个数据依赖于其他数据，那么把这个数据设计为computed的
2.如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
那么，用watch的时候更多的就去监听props的变化，而computed就用来计算data的值，感觉这样更好些~~~
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
watch可以监听某个data变化而做出不同的反应 比如可以在data到一定程度的时候关闭页面 computed就做不到这一点
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
①从属性名上，computed是计算属性，也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化，然后执行相对应的函数。②从实现上，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。watch在每次监听的值变化时，都会执行回调。其实从这一点来看，都是在依赖的值变化之后，去执行回调。很多功能本来就很多属性都可以用，只不过有更适合的。如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。③watch的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作。computed通常就是简单的计算。④watch和computed并没有哪个更底层，watch内部调用的是vm.$watch，它们的共同之处就是每个定义的属性都单独建立了一个Watcher对象。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不上最简单的代码示例，都是扯淡
该答案已被忽略，原因：无意义的内容：赞、顶、同问等毫无意义的内容,不符合答题规范：内容不是答案，可用评论、投票替代
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：Vue进阶step2-computed(计算属性) - 简书
Vue进阶step2-computed(计算属性)
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}模板内的表达式是非常便利的,但是他们实际上只用于简答的运算;在模板上放有太多的逻辑会让模板过重难以维护;这就是对于任何复杂的逻辑,你都应该使用计算属性的原因;
接下来我们将computed属性与methods
watch属性进行一些简单的比较;
1:computed属性;
经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数也会发生改变;
在这里我们声明一个计算属性reversedM我们提供的函数将作为属性vm.reb=versedMessage的getter.
console.log(vm.reversedMessage);
vm.message="Goodbye";
console.log(vm.reversedMessage);
你可以打开浏览器的控制台,自行修改;
HTML部分 &div id="example"&
&p&origonal message:"{{message}}"&/p&
&p&Computed reversed message:"{{reversedMessage}}"&/p&
&p&{{now}}&/p&
&/div&js部分var vm=new Vue({
el:"#example",//定义作用域
message:"hello"//存放全局数据;
computed:{
//a computed getter ---computed中具有get属性
reversedMessage:function(){
return this.message.split("").reverse().join("");
},//对应上面的reversedMessage属性
now:function(){
return Date.now();
}//Vue提供获取时间的方法---对上面个的now变量;
2:computed属性和methods属性
你可能已经注意到我们可以通过调用method来达到同样的效果:我们可以将同一个函数定义为一个method而不是一个计算属性,对于最终的结果,两种方式确实是相同的,然而,计算属性是基于他们的依赖就行缓存的,计算属性只有在它相关的依赖发生改变时才会重新求值,这意味着只要message 还没有发生改变,多次访问reversedMessage计算属性会立刻返回之前计划算的结果,而不必再次执行函数.这也同样意味着下面的计算属性将不再更新,
相比而言,只要发生重新渲染,method调用总会执行该函数;
我们为什么需要缓存?假设我们有一个性能开销比较大的计划属性A,
它需要便利一个极大的数组和做很大量的计算,然后我们可能尤其他的计算属性依赖A,
如果没有缓存,我们将不可避免的多次执行A的geteer,如果你不希望有缓存,请用methods代替;
因为Date.now()不是响应式依赖;
HTML部分 &div id="example"&
&p&Reversed message :"{{reversedMessage()}}"&/p&
&/div&js部分methods:{
reversedMessage:function(){
return this.message.split("").reverse().join('');
3:computed属性与watch属性;
vue确实提供了一种更通用的一种方式来观察和响应Vue实例上的数据变动:watch属性;当你有一些数据需要随着其他数据进行便动,你会很容易滥用watch--特别是你之前使用过AngularJS.然后,通常更好的想法就是使用computed属性而不是命令式的watch回调
- 就直接写两这个JS部分代码的比较吧;
通过watch实现对变量的监控
var vm=new Vue({
el:"#demo",
firstName:"Foo",
lastName:"Bar",
fullName:"foo Bar"
firstName:function(val){
this.fullName=val+" "+this.lastName
lastName:function(val){
this.fullName=this.firstName+" "+val
但是如果要是使用computed来实现这个功能的话;写作如下:
var vm=new Vue({
el:"#demo",
firstName:"foo",
lastName:"Bar",
fullName:"foo Bar"
computed:{
fullName:function(){
get:function(){
return this.firstName+" "+this.lastN
通过比较,computed的优势就出来了;
4:computed中的属性;
计算属性默认只有getter不过在需要时也可以提供一个
var vm=new Vue({
el:"#demo",
firstName:"foo",
lastName:"Bar",
fullName:"foo Bar"
computed:{
fullName:function(){
get:function(){
return this.firstName+" "+this.lastN
setter:function(){
var names=newValue.split('');
this.firstName=names[0];
this.lastName=names[names.length-1]问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，在vue.js官方文档中看到computed和watch获取全名的一个例子：
var var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
var var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar'
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
菜鸟表示不太懂他们之间的区别，难道watch就不可以像computed那样来获取吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我觉得还是有区别的，而且两种应用的情形应该区分开。
计算属性是计算属性，观察是观察。
计算属性顾名思义就是通过其他变量计算得来的另一个属性，fullName在它所依赖firstName，lastName这两个变量变化时重新计算自己的值。
另外，计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。
而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以检测页码执行获取数据的函数。
可以再详细的查看一下文档：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用computed代码写的少，没什么主要区别
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}