共计 2270 个字符，预计需要花费 6 分钟才能阅读完成。
适用场景
设想一个场景，你需要得到一个复杂运算 / 逻辑的返回值，利用模板内的表达又过长且难以阅读和维护，这时计算属性就可以很好的解决你的问题。看下面的例子：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>computed</title>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
</head>
<body>
<div id=”app”>
{{message.split(‘ ‘).reverse().join(‘ ‘)}}
</div>
<script>
new Vue({
el: “#app”,
data () {
return {
message: ‘Hello world!’
}
}
})
</script>
</body>
</html>
{{message.split(‘ ‘).reverse().join(‘ ‘)}} 这个表达式共进行了三种操作，但看起来并不是很清晰，并且当我们想在其他地方也用到最终值时就需要复制、粘贴冗长的一大段代码，所以这时候计算属性就可以及时的发挥它巨大的作用。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>computed</title>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
</head>
<body>
<div id=”app”>
{{reverseText}}
<hr>
{{reverseText}}
<hr>
{{reverseText}}
</div>
<script>
new Vue({
el: “#app”,
data () {
return {
message: ‘Hello world!’
}
},
// 计算属性
computed: {
reverseText () {
return this.message.split(‘ ‘).reverse().join(‘ ‘)
}
}
})
</script>
</body>
</html>
这时，我们就可以轻松应用结果在多个地方，而且代码还看起来更清晰了。
使用方法
在计算属性 computed 里可以完成各种复杂的逻辑（运算、函数调用），所有的计算属性以函数的形式写在 computed 里，最终返回计算结果，当 message（data 数据）有任何变化，计算属性会同时更新，并且更新视图。
每个计算属性都包括 getter 和 setter，我们平时默认用到的是 getter 来读取。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>computed</title>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
</head>
<body>
<div id=”app”>
姓：{{firstName}}
<hr>
名：{{lastName}}
<hr>
姓名：{{fullName}}
</div>
<script>
new Vue({
el: “#app”,
data () {
return {
firstName: ‘ 铁柱 ’,
lastName: ‘ 李 ’
}
},
computed: {
fullName: {
// getter
get: function() {
return this.lastName + this.firstName
},
// setter
set: function (data) {
let name = data.split(‘ ‘)
this.firstName = name[name.length – 1]
this.lastName = name[0]
}
}
}
})
</script>
</body>
</html>
默认调用时是用 fullName 的 getter 方法读取数据，想使用 set 方式时：
<div id=”app”>
姓：{{firstName}}
<hr>
名：{{lastName}}
<hr>
姓名：{{fullName = ‘ 一 枚蛋 Oops’}}
</div>
计算属性缓存
有人有可能会问，为什么不使用 methods 直接函数调用，这里就要区分一下他们的区别了
methods：只要重新渲染就会更新，函数就会执行。
computed：计算属性依赖的数据变化时，它才会重新取值，只要依赖数据不变化，它就不更新，可以缓存数据。
所以到底使用哪个属性是依据你的项目需求，看看你需不需要缓存。
以上是本期全部内容，欲知后事如何，请听下回分解 <(~︶~)↗[GO!]
