在vue.js中,计算属性和方法达到的效果是一样的,但是计算属性是基于依赖进行缓存的,只有message发生改变才会导致reverseMessage发生改变,只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数;而方法是每次调用都会执行。
计算属性:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
</script>
方法:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Method reversed message: "{{ reversedMessage() }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
需要注意的是,因为 Date.now() 不是响应式依赖,所以
computed: {
now: function () {
return Date.now()
}
}
不会更新。必须用methods:
methods: {
now: function () {
return Date.now()
}
}
计算 setter
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
现在在运行 vm.fullName = ‘John Doe’ 时, setter 会被调用, vm.firstName 和 vm.lastName 也会被对应更新。
转自博客:https://blog.csdn.net/BigFish123456789/article/details/77941540