Vue中computed怎么理解？
computed 又称计算属性, 什么情况下会用到计算属性，我们直接上代码理解一下
//我们有个name，经过多次逻辑处理最终显示到页面中
//它不是一个简单的声明式逻辑，我么需要看一段时间才能理解name
<template>
<div>
{{name.split('').reverse().join('')}}
<br>
{{message}}
</div>
</template>
<script>
export default {
data() {
return {
name: 'hello vue!'
}
},
//所以我们使用computed，处理复杂逻辑，计算属性
computed: {
message() {
return this.name.split('').reverse().join('');
}
}
}
</script>
//使用methods，每次render都会重新计算
<template>
<div>
{{getMessage()}}
</div>
</template>
<script>
export default {
data() {
return {
message: 'hello vue!'
}
},
methods: {
getMessage() {
return this.message.split('').reverse().join('');
},
now() {
return Date.now()
}
},
}
</script>
<style lang="scss" scoped>
</style>
//使用computed是基于它们的依赖进行缓存的，也就是说this.message不改变，每次访问都会立即返回结果
<template>
<div>
{{getMessage}}
</div>
</template>
<script>
export default {
data() {
return {
message: 'hello vue!'
}
},
computed: {
getMessage() {
return this.message.split('').reverse().join('');
},
now() {
return Date.now()
}
},
}
</script>
<style lang="scss" scoped>
</style>
computed 跟data相比更适用于复杂逻辑运算
computed 跟methods相比更适用于需要缓存的计算
