Vue基础之计算属性

huaixiaoz 发布于2019-08-30 15:56 / 551人阅读

摘要：计算属性这时，我们就可以轻松应用结果在多个地方，而且代码还看起来更清晰了。每个计算属性都包括和，我们平时默认用到的是来读取。计算属性依赖的数据变化时，它才会重新取值，只要依赖数据不变化，它就不更新，可以缓存数据。

适用场景

设想一个场景，你需要得到一个复杂运算/逻辑的返回值，利用模板内的表达又过长且难以阅读和维护，这时计算属性就可以很好的解决你的问题。看下面的例子：




  
  
  
  computed
  


  
    {{message.split(" ").reverse().join(" ")}}

{{message.split(" ").reverse().join(" ")}}这个表达式共进行了三种操作，但看起来并不是很清晰，并且当我们想在其他地方也用到最终值时就需要复制、粘贴冗长的一大段代码，所以这时候计算属性就可以及时的发挥它巨大的作用。




  
  
  
  computed
  


  
    {{reverseText}}
    
    {{reverseText}}
    
    {{reverseText}}

这时，我们就可以轻松应用结果在多个地方，而且代码还看起来更清晰了。

使用方法

在计算属性computed里可以完成各种复杂的逻辑（运算、函数调用），所有的计算属性以函数的形式写在computed里，最终返回计算结果，当message（data数据）有任何变化，计算属性会同时更新，并且更新视图。

每个计算属性都包括getter和setter，我们平时默认用到的是getter来读取。




  
  
  
  computed
  


  
    姓：{{firstName}}
    
    名：{{lastName}}
    
    姓名：{{fullName}}

默认调用时是用fullName的getter方法读取数据，想使用set方式时：


  姓：{{firstName}}
  
  名：{{lastName}}
  
  姓名：{{fullName = "一 枚蛋Oops"}}

计算属性缓存

有人有可能会问，为什么不使用methods直接函数调用，这里就要区分一下他们的区别了

methods：只要重新渲染就会更新，函数就会执行。

computed：计算属性依赖的数据变化时，它才会重新取值，只要依赖数据不变化，它就不更新，可以缓存数据。

所以到底使用哪个属性是依据你的项目需求，看看你需不需要缓存。

以上是本期全部内容，欲知后事如何，请听下回分解<(￣︶￣)↗[GO!]

云服务器 GPU云服务器 vue的计算属性 vue实例属性 vue.js 属性之基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117531.html

# vue.js 之对vue.js基础理解

摘要：之对基础理解构造器是一个构造函数，编程中称之为构造器每一个都是一个构造函数的实例，这个过程叫做实例化构造函数需要将其实例化后才会启用构造器要求实例化时需要传入一个选项对象组件其实都是被扩展的实例。 vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数，编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫...

Rainie 2019-08-20 19:04 评论0 收藏0
Vue基础之计算属性

摘要：计算属性这时，我们就可以轻松应用结果在多个地方，而且代码还看起来更清晰了。每个计算属性都包括和，我们平时默认用到的是来读取。计算属性依赖的数据变化时，它才会重新取值，只要依赖数据不变化，它就不更新，可以缓存数据。适用场景设想一个场景，你需要得到一个复杂运算/逻辑的返回值，利用模板内的表达又过长且难以阅读和维护，这时计算属性就可以很好的解决你的问题。看下面的例子： ...

wuyangnju 2019-08-23 15:56 评论0 收藏0
Vue基础之计算属性

摘要：计算属性这时，我们就可以轻松应用结果在多个地方，而且代码还看起来更清晰了。每个计算属性都包括和，我们平时默认用到的是来读取。计算属性依赖的数据变化时，它才会重新取值，只要依赖数据不变化，它就不更新，可以缓存数据。适用场景设想一个场景，你需要得到一个复杂运算/逻辑的返回值，利用模板内的表达又过长且难以阅读和维护，这时计算属性就可以很好的解决你的问题。看下面的例子： ...

android_c 2019-08-02 14:30 评论0 收藏0
vue.js入门教程之基础语法

摘要：与绑定数据绑定一个常见需求是操作元素的列表和它的内联样式。两者只能选其一对象语法我们可以传给一个对象，以动态地切换。注意不支持语法。相比之下，简单得多元素始终被编译并保留，只是简单地基于切换。这意味着将分别重复运行于每个循环中。 vue Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理...

pumpkin9 2019-08-20 19:06 评论0 收藏0