本期，边肖将为您带来关于如何在Vue中使用计算属性的信息。文章内容丰富，从专业角度进行分析和描述。看完这篇文章，希望你能有所收获。
我们先来看看Vue计算属性，介绍一下Vue计算属性的基本用法。
计算属性
有时候，我们在模板中放了太多的逻辑，使得模板太重，难以维护。示例：
divided=' app '
{{message.split(')。反转()。join(“”)} }
/div在这种情况下，我们必须观察一段时间才能意识到我们想要显示变量消息的翻转字符串，一旦我们想要在模板中多次使用翻转字符串，那将会更加麻烦。因此，当我们处理复杂逻辑时，我们都应该使用计算属性。
基础用法
计算属性是Vue配置对象中的一个属性，使用如下：
divided=' app '
！-计算属性的值可以像数据数据一样直接使用-
{{someComputed}}
/div
const VM=NewVue({ 0
el:'#app '，
computed:{
//返回的值是计算属性的值。
someComputed(){ 0
返回“某些值”
}
}
})例如，如果我们想要获得字符串的翻转字符串，我们可以使用计算属性来实现：
divided=' app '
p原始字符串：“{ msg } }”/p
p翻转：处的字符“{ reversedMsg } }”/p
/div
const VM=NewVue({ 0
el:'#app '，
数据：{
msg: '你好'
},
computed:{
reversedmsg : function(){ 0
returnthis.msg.split(')。反转()。join(' ')；
}
}
})我们可以看到reversedMsg的值取决于Msg的值，所以当我们将msg的值改为时，reversedMsg的值也会随之改变。
00-1010实际上，上述功能和使用方法也可以实现，例如：
divided=' app '
p原始字符串：“{ msg } }”/p
p翻转字符串：“{ reversedMsg()} }”/p
/div
const VM=NewVue({ 0
（=NationalBureauofStandards）国家标准局
p;el: '#app',
data: {
msg: 'Hello'
},
methods: {
reversedMsg: function () {
return this.msg.split('').reverse().join('');
}
}
})
虽然在表达式中调用方法也可以实现同样的效果，但是使用计算属性和使用方法有着本质的区别。 当使用方法时，每一次页面重新渲染，对应的方法都会重新执行一次，如：
<div id="app">
<p>{{ name }}</p>
<p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello',
name: 'shanshan'
},
methods: {
reversedMsg: function () {
console.log('方法执行啦');
return this.msg.split('').reverse().join('');
}
}
})
vm.name = 'duyi';
在上面的例子中我们可以看到，一旦更改name的值，页面会重新渲染，此刻控制台中打印出方法执行啦这串字符串，代表着reversedMsg这个函数执行了，但是我们并不需要该方法执行，因为改动的数据和这个函数没有任何关系，如果这个函数内的逻辑很复杂，那么对于性能来讲，也是一种消耗。
但是利用计算属性做，就不会有这样的现象出现，如：
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello',
name: 'shanshan'
},
computed: {
reversedMsg: function () {
console.log('计算执行啦');
return this.msg.split('').reverse().join('');
}
}
})
vm.name = 'duyi';
此时可以看到，当给数据name重新赋值时，计算属性并没有执行。 所以，计算属性和方法的最本质的区别，是：计算属性是基于响应式依赖进行缓存的，计算属性的值一直存于缓存中，只要它依赖的data数据不改变，每次访问计算属性，都会立刻返回缓存的结果，而不是再次执行函数。而方法则是每次触发重新渲染，调用方法将总会再次执行函数。
那么，为什么需要缓存呢？
假如说，我们有一个计算属性A，它需要遍历一个巨大的数组并且做巨大的计算。然后我们需要使用到这个计算属性A，如果没有缓存，我们就会再次执行A的函数，这样性能开销就变得很大了。
深入计算属性
计算属性除了写成一个函数之外，还可以写成一个对象，对象内有两个属性，getter&setter，这两个属性皆为函数，写法如下：
const vm = new Vue({
el: '#app',
computed: {
fullName: {
getter () {
// 一些代码
},
setter () {
// 一些代码
}
}
}
})
getter 读取
在前面，我们直接将计算属性写成了一个函数，这个函数即为getter函数。也就是说，计算属性默认只有getter。 getter的this，被自动绑定为Vue实例。
何时执行？
当我们去获取某一个计算属性时，就会执行get函数。
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
computed: {
reversedMsg: {
getter () {
return this.msg.split('').reverse().join('');
}
}
}
})
setter 设置
可选，set函数在给计算属性重新赋值时会执行。 参数：为被重新设置的值。 setter的this，被自动绑定为Vue实例。
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello',
firstStr: ''
},
computed: {
reversedMsg: {
getter () {
return this.msg.split('').reverse().join('');
},
setter (newVal) {
this.firstStr = newVal[0];
}
}
}
})
要注意，即使给计算属性赋了值，计算属性也不会改变，在重复一遍，只有当依赖的响应式属性变化了，计算属性才会重新计算。
练习_姓名筛选
personArr: [
{
name: '',
src: '.jpg',
des: '颈椎不好',
sex: 'm',
id: '056482'
},
{
name: '',
src: '.jpg',
des: '我是谁',
sex: 'f',
id: '157894'
},
{
name: '',
src: '.jpg', des: '我长得很好看',
sex: 'f',
id: '2849245'
},
{
name: '',
src: '.jpeg',
des: '你没有见过陌生的脸',
sex: 'm',
id: '348515'
},
{
name: '',
src: '.jpeg',
des: '瓜皮刘',
sex: 'm',
id: '478454'
}
]
练习_全选商品
courseList: [
{
poster: '.jpg',
title: '',
price: 1299,
cart: 1,
id: 0
},
{
poster: '.jpg',
title: '',
price: 1148,
cart: 1,
id: 1595402664708
},
{
poster: '.jpg',
title: '',
price: 1,
cart: 1,
id: 1596305473062
},
{
poster: '.jpg',
title: '',
price: 1,
cart: 1,
id: 1595413512182
},
{
poster: '.jpg',
title: '',
price: 12798,
cart: 1,
id: 1596302161181
},
{
poster: '.jpg',
title: '',
price: 1,
cart: 1,
id: 1596300025301,
},
]
上述就是小编为大家分享的Vue中怎么使用计算属性了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/133161.html