一、计算属性
计算属性使用computed关键词,主要用于处理一些复杂逻辑,比如使用以下方式在模板中实现字符反转的逻辑时,模板显得比较混乱:
<div id="hello">
{{ msg.split('').reverse().join('') }}
</div>
在这里改用计算属性实现:
<template>
<div id="hello">
<p>原内容: {{ msg }}</p>
<p>反转后内容: {{ reversedMsg }}</p>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg:'abcdef'
}
},
computed:{
reversedMsg: function () {
return this.msg.split('').reverse().join('')
}
}
}
</script>
在上面程序中,定义一个computed并在其中声明一个计算属性 reversedMsg(默认是getter属性),当msg 发生改变时,会触发reversedMsg。
二、计算属性与方法的区别
也可以使用 methods 来替代 computed,执行结果是一样的。不同之处在于, computed 基于依赖缓存,只有依赖内容发生改变时才会重新取值。也就是msg没有发生改变的前提下,多次访问 reversedMsg 计算属性会立即返回之前的计算结果,而不会再次执行函数。
而 methods 在重新渲染的时候,总会重新调用执行。如果不希望使用缓存,则可以使用 methods 属性。
三、计算属性的setter方式
我们可以增加get、set方式的定义来实现getter读取、setter设值的操作:
<template>
<div id="hello">
<p>内容: {{ msg }}</p>
<p>新设置的内容: {{ reversedMsg ='123456'}}</p>
<p>反转后内容: {{ reversedMsg }}</p>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg:'abcdef'
}
},
computed:{
reversedMsg:{
get: function () {
return this.msg.split('').reverse().join('')
},
set: function (newValue) {
this.msg = newValue;
}
}
}
}
</script>
END.