vue计算属性写法,vue的计算属性和方法有什么区别
在这篇文章中，边肖整理了一份关于Vue中计算属性使用的知识点总结，对其感兴趣的朋友可以跟随参考。
计算属性
有时候，我们在模板中放入了过多的逻辑，导致模板过于沉重，难以维护。例如：
div id=应用程序
{{ message.split( )。反转()。加入(“”)}}
/div
在这种情况下，我们必须观察一段时间，才能意识到这是想要显示变量消息的翻转字符串。而且，一旦我们要在模板中多次使用翻转字符串，就会比较麻烦。所以我们在处理复杂逻辑的时候，都要用到计算属性。
基础用法
计算是Vue配置对象中的一个属性，其用法如下：
div id=应用程序
！-计算属性的值可以像数据data一样直接使用-
{{ someComputed }}
/div
const vm=new Vue({
埃尔： #app ，
计算值：{
//返回值是计算属性的值。
someComputed () {
返回“一些值”
}
}
})
例如，如果我们想要获得字符串的翻转字符串，我们可以通过使用calculation属性来实现：
div id=应用程序
p原始字符串：“{ { msg } }”/p
p翻转字符：“{ { reversed msg } }”/p
/div
const vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
},
计算值：{
reversedMsg: function () {
返回this.msg.split( )。反转()。联接(“”)；
}
}
})
我们可以看到reversedMsg的值依赖于Msg的值，所以当我们改变msg的值时，reversedMsg的值也会改变。
计算属性 vs 方法
事实上，上述功能也可以通过使用方法来实现，例如：
div id=应用程序
p原始字符串：“{ { msg } }”/p
p翻转字符串：“{ { reversed msg()} }”/p
/div
const vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
},
方法：{
reversedMsg: function () {
返回this.msg.split( )。反转()。联接(“”)；
}
}
})
虽然在表达式中调用方法可以达到同样的效果，但是使用计算属性和使用方法有本质的区别。使用方法时，每次重新呈现页面时，都会重新执行相应的方法，例如：
div id=应用程序
p{{ name }}/p
p{{ reversedMsg() }}/p
/div
const vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”，
名称：姗姗
},
方法：{
reversedMsg: function () {
Console.log(方法已执行)；
返回this.msg.split( )。反转()。联接(“”)；
}
}
})
vm.name=杜毅；
在上面的例子中，我们可以看到，一旦name的值被更改，页面将被重新呈现。这时，在控制台中打印出方法执行的字符串，这意味着执行了reversedMsg函数。但是，我们不需要执行这个方法，因为改变的数据与这个函数无关。如果这个函数中的逻辑比较复杂，对于性能来说也是一种消耗。
但是，使用计算属性，就不会出现这种现象，比如：
const vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”，
名称：姗姗
},
计算值：{
reversedMsg: function () {
Console.log(计算已执行)；
返回this.msg.split( )。反转()。联接(“”)；
}
}
})
vm.name=杜毅；
此时，您可以看到当数据名称被重新分配时，计算属性没有被执行。因此，计算属性和方法最本质的区别在于，计算属性是基于响应依赖来缓存的，计算属性的值总是存储在缓存中。只要它所依赖的数据不发生变化，它每次访问计算属性，都会立即返回缓存的结果，而不是再次执行函数。该方法总是在每次触发重新呈现时再次执行该函数。
那么，为什么需要缓存呢？
假设我们有一个计算属性A，需要遍历一个巨大的数组，进行巨大的计算。那么我们就需要使用这个计算属性A，如果没有缓存，我们就要再次执行A的函数，这样性能开销就变得很高。
深入计算属性
除了作为函数编写之外，属性也可以作为对象编写。对象中有两个属性，gettersetter。这两个属性都是函数，编写如下：
const vm=new Vue({
埃尔： #app ，
计算值：{
全名：{
getter () {
//一些代码
},
setter () {
//一些代码
}
}
}
})
getter 读取
之前我们直接把计算属性写成函数，叫做getter函数。也就是说，计算出来的属性默认只有getter。这个getter被自动绑定为一个Vue实例。
什么时候执行？
当我们得到一个计算属性时，我们将执行get函数。
const vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
},
计算值：{
reversedMsg: {
getter () {
返回this.msg.split( )。反转()。联接(“”)；
}
}
}
})
setter 设置
或者，在重新分配计算属性时执行set函数。参数：已被重置的值。setter的这个被自动绑定为Vue实例。
const vm=new Vue({
埃尔： #app ，
数据：{
消息：“你好”，
第一个字符串：“”
},
计算值：{
reversedMsg: {
getter () {
返回this.msg.split( )。反转()。联接(“”)；
},
setter (newVal) {
this . first str=new val[0]；
}
}
}
})
请注意，即使将值分配给计算属性，计算属性也不会改变。同样，只有当从属响应属性发生变化时，才会重新计算计算属性。
练习_姓名筛选
personArr: [
{
名称： ，
src:。 jpg ，
Des:“颈椎不好”，
性别： m ，
id:“056482”
},
{
名称： ，
src:。 jpg ，
德斯：“我是谁”，
性别： f ，
id:“157894”
},
{
名称： ，
Src:。jpg ，des:我很好看，
性别： f ，
id:“2849245”
},
{
名称： ，
src:。jpeg ，
德斯：“你从未见过陌生的面孔”，
性别： m ，
id:“348515”
},
{
名称： ，
src:。jpeg ，
德斯：“瓜皮刘”，
性别： m ，
id:“478454”
}
]
练习_全选商品
课程列表：[
{
海报：。 jpg ，
标题： ，
价格：1299，
推车：1，
id: 0
},
{
海报：。 jpg ，
标题： ，
价格：1148，
推车：1，
id: 1595402664708
},
{
海报：。 jpg ，
标题： ，
价格：1，
推车：1，
id: 1596305473062
},
{
海报：。 jpg ，
标题： ，
价格：1，
推车：1，
id: 1595413512182
},
{
海报：。 jpg ，
标题： ，
价格：12798，
推车：1，
id: 1596302161181
},
{
海报：。 jpg ，
标题： ，
价格：1，
推车：1，
id: 1596300025301，
},
]
知识点拓展：
实例扩展
div id=app1/div
div id=app2
{
！- {reverseMes}}
/div
让vm1=新Vue({
埃尔： #app1 ，
数据：{
mes:“你好”
}
})
让vm2=新Vue({
埃尔： #app2 ，
计算值：{
reverseMes(){
//使用实例vm1中数据中心的mes来反转字符串。
返回vm1.mes.split(“”)。反转()。联接(“”)
}
}
})
也可以使用vm1、vm2计算属性中的数据。
用户自定义的计算属性不仅可以用在插值表达式中，还可以用在v-bind:属性绑定中，用来做一些样式变换等等。
以上是Vue中使用计算属性的知识点总结的详细内容。关于如何在Vue中使用计算属性的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。