7、computed计算属性
2022-04-01 12:29:58 0 举报AI智能生成
vue学习
作者其他创作
大纲/内容
定义
它不是方法是一个属性，所以在视图中调取的时候不能加括号执行
注意
computed 中的属性会挂载到实例上
函数中的 this 是当前实例
它<b><font color="#c41230">存储的值是对应方法返回的结果</font></b>（getter函数处理的结果）
特点
计算属性是基于它们的响应式依赖进行缓存的。
只要依赖不发生改变，这个函数就不会执行；
依赖
就是在这个函数中使用的 this 上的属性<b><font color="#c41230">（必须是同步使用）</font></b>
例
<h2><font color="#ffffff">{{personType}}</font></h2>
<br>
<b><font color="#c41230">只要 age 和 name 没有发生改变</font></b>，计算属性都会立即返回之前的计算结果，而<b><font color="#c41230">不必再次执行函数</font></b>。<br>
应用场景
当<b><font color="#c41230">小胡子中用到的是较复杂的表达式的时候</font></b>，我们一般<b><font color="#c41230">用计算属性先处理</font></b>一下，<b><font color="#c41230">把计算属性的返回结果放在小胡子中</font></b>
使用
有明显的依赖关系的时候，建议使用计算属性
computed 和 methods 区别
methods
1、是方法，可以传递参数
2、每一次重新渲染都会执行
computed
1、是属性，不能传递参数
2、有明显的依赖关系
在依赖不变的时候，不让对应的方法执行
3、计算属性中必须要关联一个响应式数据，否则GETTER函数只执行一次
4、异步的时候，尽量不要选用 computed
computed 全写
计算属性默认只有 getter，不过在需要时也可以提供一个 setter：
简写
<br>
相当于只写了 GETTER 函数
全写
<br>
getter 函数
只要获取这个属性值就会触发 GET 函数执行
setter 函数
给属性设置值的时候会触发 SET 函数
0 条评论
下一页
