码迷,mamicode.com
首页 > 其他好文 > 详细

用计算属性来响应改变

时间:2019-01-03 17:30:21      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:51cto   ext   cto   .com   process   绑定   图片   vpd   是什么   

data属性不是响应式的,所以不能写成
data:{counter:0, result:this.counter>5?Greate 5 : Small5 },而应该写成
技术分享图片
然后在html调用:
技术分享图片
现在在增加按钮和secondCounter时:
技术分享图片
那么这个result()方法会在每次更新页面的时候都执行一次,Vue会在每次需要更新的时候更新一次页面,比如则个secondCounder的状态改变的时候,就需要更新页面,Vue不知道result()函数是否执行了,也不知道result()函数是否用到改变了的属性,所以Vue不知道secondCounter的变化是否会影响result()函数,所以它也重复执行了result()函数
在这种情况下,可以用一个新的全局Vue对象上的属性,Computed(计算属性)

点击increase时,output和result都被执行了,因为我改变了counter的属性值,然后输出了computed里的依赖,counter的output属性,依赖counter的属性就被刷新了。即result()函数被执行了。
当我点击increaseSecond,它只会增加secondCounter的值,
computed的output没有用到这个属性,如果我点击increaseSecond,就只能看到绑定了的方法,computed不会被执行,
因为Vue不会注意到其中的属性是什么,这里只有computed的属性,

着就是我们在点击increaseSecond,按钮时没有看到Computed的原因,
这就是当我们处理依赖性属性时,怎么使用computed属性的方法。

因为Vue会缓存结果,所以只在需重写计算属性时,才重写计算,所以只有当呢不需要缓存结果时,才用到result()这种函数的形式,也就是你下每次DOM更新时,都重写计算result,因为又时候,可能情况就需要这样。
比如,你更新的是不再调用的函数中的属性。

总结:data中定义多个属性counter1 ,conter2, conter3 ,counter4,通过4按钮分别改变对应的counter值,methods中设置多个函数,result1调用counter1, result2调用counter2,result3调用counter3,在computed中设置方法output,output调用counter4。然后再P标签中调用result1,result2,result3,output。点击按钮1,result1,result2,result3都会被执行,点击按钮2,按钮3也一样,但是点击按钮4时,result1,result2,result3,output都会被执行。

用计算属性来响应改变

标签:51cto   ext   cto   .com   process   绑定   图片   vpd   是什么   

原文地址:http://blog.51cto.com/13577938/2338333

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!