5.7computed 计算属性

我们知道, 在模板中可以直接通过插值语法显示一些data中的数据.

?
?

但是在某些情况, 我们可能需要对数据进行一些转化后再显示, 或者需要将多个数据结合起来进行显示

?
?

比如我们有firstName和lastName两个变量, 我们需要显示完整的名称.

但是如果多个地方都需要显示完整的名称, 我们就需要写多个{{firstName}} {{lastName}}

我们可以将上面的代码换成计算属性:

?
?

OK, 我们发现计算属性是写在实例的computed选项中的.

?
?

?
?

?
?

计算属性中也可以进行一些更加复杂的操作, 比如下面的例子:

?
?

?
?

计算属性的setter和getter

每个计算属性都包含一个getter和一个setter

?
?

在上面的例子中, 我们只是使用getter来读取.

在某些情况下, 你也可以提供一个setter方法(不常用).

在需要写setter的时候, 代码如下:

?
?

?
?

我们可能会考虑这样的一个问题:

?
?

methods和computed看起来都可以实现我们的功能,

那么为什么还要多一个计算属性这个东西呢?

原因: 计算属性会进行缓存, 如果多次使用时, 计算属性只会调用一次.

computed区别于method的核心

在官方文档中, 强调了computed区别于method最重要的两点

?
?

computed是属性调用, 而methods是函数调用

computed带有缓存功能, 而methods不是

computed定义的方法我们是以属性访问的形式调用的, {{computedTest}}

但是methods定义的方法, 我们必须要加上()来调用, 如{{methodTest()}}, 否则, 视图会出现test1的情况, 见下图

我们可以将同一函数定义为一个方法而不是一个计算属性. 两种方式的最终结果确实是完全相同的. 然而, 不同的是计算属性是基于它们的响应式依赖进行缓存的. 只在相关响应式依赖发生改变时它们才会重新求值. 这就意味着只要 text 还没有发生改变, 多次访问 getText 计算属性会立即返回之前的计算结果, 而不必再次执行函数. 而方法只要页面中的属性发生改变就会重新执行

对于任何复杂逻辑, 你都应当使用计算属性

computed依赖于data中的数据, 只有在它的相关依赖数据发生改变时才会重新求值

?
?

原文地址:https://www.cnblogs.com/edfg/p/12708317.html

时间: 04-15

5.7computed 计算属性的相关文章

第三节、计算属性

计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="ap

vue2.0 之计算属性和数据监听

计算属性computed <template> <div> <input type="text" name="" v-model="myVal"><br/> {{ myValueWithoutNum }}<br/> {{ getMyValueWithoutNum() }}<br/> </div> </template> <script> e

Vue之计算属性

上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for来加载妹子图片,现在我想在原先的基础上,添加两个按钮,一个用来增加一个妹子,一个用来减少一个妹子: html: <div id="vfor"> <template v-for="mm in mms"> <span>{{mm.name}

vue入门(二)----模板与计算属性

其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. 首先我们说一下模板,其实如果看过第一节vue入门----组件,我们会知道更好更科学的办法是通过创建组件的方式,这种方式允许我们任意进行组件的嵌套.而通过模板的方式的话,个人觉得效果并没有组件好.行,开始切入正题,现在我们首先通过一下几点来进行学习(其实是按照官网的顺序记录自己不懂的知识点). 1.

Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等

写了12个Person来复习,不过完成同样的代码需要敲键盘的次数相比OC确实少了很多,这很多应该归功于Swift中不写分号,以及少了OC中的中括号. 一.类与结构体 两者在Swift中差不了多少了 类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法) 3)都能使用扩展(extension)与协议(protocol) 4)类与结构体(枚举)中的全局属性/方法:在类中用class关键字,但在结构体中

Swift::2::计算属性

计算属性(Computed Properties) 属性 属性一般用于类(class),结构体(struct),枚举(emun)作为存储数据,swift 的属性也像OC一样,拥有 getters 和 setters方法. 而所谓的计算属性,和一般的属性的区别,仅仅是它不存储数据,而是使用已有的属性(有存储作用的属性),进行运算,而后通过getter 和 setter 反馈结果. 下面是一个例子,例子中自定义一个时间类,类中,seconds 是唯一的存储属性,而miniutes,hours,day

vue.js基础知识篇(3):计算属性、表单控件绑定

第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="example"> <

Swift中对计算属性的理解和对之前的补充

这个功能的重点作用应该是在计算上. 对于一般的属性,要么直接存一个,要么直接读一个,计算属性则可以根据所设置内容,进行一些修改或计算之类的, 比如: import UIKit class sample { var no1 = 0.0, no2 = 0.0 var length = 300.0, breadth = 150.0 var middle:(Double,Double) { get { return(length / 2, breadth / 2) } // 如果没有加上括号, 那么默认

vue学习笔记 计算属性(四)

计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed里的函数名,对外就是一个变量,默认是getter. <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed mess

【iOS】Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等

写了12个Person来复习,不过完成同样的代码需要敲键盘的次数相比OC确实少了很多,这很多应该归功于Swift中不写分号,以及少了OC中的中括号. 一.类与结构体 两者在Swift中差不了多少了 类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法) 3)都能使用扩展(extension)与协议(protocol) 类比结构体多的功能: 1)能继承 2)运行时能检查类对象的类型 3)析构释放资源