vue的computed计算属性

computed可定义一些函数,这些函数叫作【计算属性】
只要data里面的数据发生变化computed会同步改变
引用【计算属性】时不要加  () ,应当普通属性使用
例:console.log(this.computedName)
 
computed用的最可能是在模板
模版中放入太多声明式逻辑会让模板臃肿尤为在页面大量使用复杂的逻辑表达式处理数据,
会对页面的可维护性形成很大的影响,而 computed 的设计初衷也正是用于解决此类问题。
例:<p>{{'名称:' + this.name + ',年龄:' + this.age + ',性别:' + (this.info.sex ? '男' : '女')}}</p>
 
尽可能一张图解释清楚(尝试用圈圈区分关系):

 ps:图片不清晰的尝试新窗口打开html

 
通常都只用 getter ,以上内容就是 getter 的默认模式
不多用到 setter ,起码我作业务暂时没遇到,面试倒会有人会问
下面举个例子说说 setter
 
 
 
不少时候都会拿 Computed 与 Watch 对比(好比面试会问)
这两个均可以实现相同效果但过程有点不同能够根据实际状况来用。

 

Computed特色:
须要主动调用,具备缓存能力只有数据再次改变才会从新渲染,
不然就会直接拿取缓存中的数据。面试

Watch特色:
不管在哪只要被绑定数据发生变化Watch就会响应,
这个特色很适合在异步操做时用上。缓存

 

 
 
 

原文出处:https://www.cnblogs.com/konghaowei/p/10893404.html异步

相关文章
相关标签/搜索