Vue中的computed属性称为计算属性。模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
例如:
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。
你可以使用computed属性这么写:
结果:
Original message: "Hello"
Computed reversed message: "olleH"
问:为什么reversedMessage不可以在data里面定义?
答:定义会报错,因为computed作为计算属性定义reversedMessage返回对应的结果给这个变量(通俗的理解,reversedMessage只是监控变量,对message进行处理,实际上重新返回了message),变量不可以被重复定义和赋值。
计算属性只在第一次调用时执行运算过程,计算结果会被缓存在内存中,多次调用时,如果依赖的数据未发生变化,不会再去进行运算过程的执行。
画重点:computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值。我理解为,computed只能监控放在data等对象下的实例数据。
看下面的例子:
?<button?@click="getMethodsDate">methods</button>
?<button?@click="getComputedDate">computed</button>
??computed:?{
????computedDate()?{
??????return?new?Date();
????}
??},
????getMethodsDate()?{
??????alert(new?Date());
????},
????//?返回computed选项中设置的计算属性——computedDate
????getComputedDate()?{
??????alert(this.computedDate);
????},
多次点击computed按钮,返回的时间是相同的!每次点击methods按钮返回的时间是不同的。
原因正是computed依赖于data中的数据,new Date()不是依赖型数据(不是放在data等对象下的实例数据),所以computed只提供了缓存的值,而没有重新计算。
只有符合:1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。
总结:
支持缓存,只有依赖数据发生改变,才会重新进行计算;
不支持异步,当computed内有异步操作时无效,无法监听数据的变化;
computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是多对一或者一对一,一般用computed
如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。