vue.js 计算属性,vue计算属性和普通函数的区别
本文主要介绍vue计算属性和功能的选择。文章重点介绍了课题的相关信息，各位朋友可以参考一下。
目录
一、计算属性使用场景定义格式。常见的写用格式例子3354数组求和计算有cache II。摘要
一、计算属性
使用场景
从现有数据A计算新数据B，并使用计算属性。
如果一个结果需要依赖data中的数据，但是需要一些逻辑处理才能得到你想要的数据。此时，您可以使用计算属性。
定义格式
在vue实例中，补充计算的配置项。
普通写法
{
data(){}，
方法：{}
//声明计算属性
计算值：{
//属性名(计算属性名)
//属性值(计算属性处理程序)
计算属性名1 () {
//处理依赖数据并返回。
返回
},
计算属性名称2 () {
//处理依赖数据并返回。
返回
}
}
}
Computed是vue的配置选项，它的值是一个可以定义多个计算属性的对象，每个计算属性都是一个函数。
属性名称：计算属性的名称属性的值：计算属性的物质函数对需要依赖的数据进行逻辑处理。处理后需要返回，返回值是计算属性的值。
使用格式
在两个地方使用：
使用模板插值表达式{ {计算属性名称}}计算此实例中带有其他说明的属性名称。
示例 —— 数组求和
模板
div id=应用程序
Psum: {{ sum1 }}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
arr: [1，2，3，4]
}
},
计算值：{
sum1(){
//处理依赖数据并返回。
返回this.arr.reduce((sum，item)=sum item，0)
}
}
}
/脚本
在模板中使用计算属性与使用数据是一样的。
尽管该函数是在calculation属性中声明的，但它在模板中作为的数据使用。不需要括号。
小结：
什么时间用：数据需要复杂的逻辑处理。当产生新数据时。定义：是计算的特殊配置项目。有多种功能。使用：计算属性的使用方法与数据中的数据项相同；计算属性-计算：该值是计算原始数据后得到的新数据计算属性-属性：。它的使用方式与原始数据相同。这个。计算属性名称，{ {计算属性名称}}执行的时机:如果计算属性所依赖的数据项发生变化，将自动调用。
computed有缓存
示例：
模板
div id=应用程序
Psum: {{ sum1 }}/p
Psum: {{ sum1 }}/p
Psum: {{ sum1 }}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
arr: [1，2，3，4]
}
},
计算值：{
sum1(){
//求arr的和并返回
//如果arr更改，将重新计算计算的属性
Console.log(“调用了计算属性”)
返回this.arr.reduce((sum，item)=sum item，0)
}
}
}
/脚本
结果：
从上面的例子可以看出，calculation属性在模板中被调用了三次，但是控制台只打印了一次。这是因为在执行计算属性之前，它会从缓存中寻找这些数据，如果是，就不会执行。计算的执行机制就像查字典一样。如果可以在缓存中找到要计算的数据，则不执行该函数，而是直接取数据。
二、总结
当我们在模板中显示数据项复杂计算后的结果时，我们有两种解决方案：
计算属性函数如何选择：
方法定义一个函数。如果在模板中使用，每使用一次，就相当于调用一次，处理逻辑会重新执行。Computed定义一个计算属性。如果在模板中使用，将会多次使用，但如果依赖数据没有改变，则不会重新执行计算属性对应的函数。属性将被缓存以提高呈现性能。关于vue计算属性和功能选择的这篇文章就到这里了。有关vue计算属性的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。