登录免费注册



7、computed计算属性

首页  思维导图  详情



7、computed计算属性

2022-04-01 12:29:58   0  举报





AI智能生成

vue学习

前端开发

vue

computed

计算属性

金色小芝麻

模版推荐

作者其他创作

大纲/内容

定义

它不是方法是一个属性，所以在视图中调取的时候不能加括号执行

注意

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 函数

 Collect

Get Started

productIn属性

 Collect

Get Started

productOrder属性

 Collect

Get Started

新增属性映射

 Collect

Get Started

属性分析













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document