Vue.js是一個(gè)非常流行的JavaScript框架，它的核心思想是使用聲明式渲染來簡化UI開發(fā)。在Vue.js中，一個(gè)關(guān)鍵概念是計(jì)算屬性（computed）。計(jì)算屬性能夠讓你在模板中聲明式地計(jì)算出一個(gè)值，并且在該值發(fā)生變化時(shí)自動(dòng)更新。

在Vue.js中，你可以通過使用computed對象來創(chuàng)建一個(gè)計(jì)算屬性。computed對象可以包含多個(gè)屬性，每個(gè)屬性的值都是一個(gè)函數(shù)。這些函數(shù)被稱為計(jì)算屬性的getter函數(shù)：它們會(huì)被自動(dòng)調(diào)用，并返回計(jì)算屬性的值。下面是一個(gè)簡單的例子：

{{ message }}
{{ reversedMessage }}
var vm = new Vue({
el: "#example",
data: {
message: "Hello World"
},
computed: {
reversedMessage: function() {
return this.message.split("").reverse().join("");
}
}
});

在這個(gè)例子中，我們有一個(gè)Vue實(shí)例，并且它有兩個(gè)計(jì)算屬性：message和reversedMessage。reversedMessage的值是通過對message進(jìn)行反轉(zhuǎn)得到的。當(dāng)我們修改message值時(shí)，reversedMessage值會(huì)自動(dòng)更新。這是因?yàn)閂ue.js會(huì)自動(dòng)跟蹤相關(guān)數(shù)據(jù)，并保證計(jì)算屬性只會(huì)被更新一次。

計(jì)算屬性可以通過設(shè)置setter函數(shù)來實(shí)現(xiàn)雙向綁定。setter函數(shù)接收計(jì)算屬性的新值，以及當(dāng)前的this對象。下面是一個(gè)例子：

var vm = new Vue({
el: "#example",
data: {
firstName: "John",
lastName: "Doe"
},
computed: {
fullName: {
get: function() {
return this.firstName + " " + this.lastName;
},
set: function(newValue) {
var names = newValue.split(" ");
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});

在這個(gè)例子中，我們定義了一個(gè)fullName計(jì)算屬性，并且提供了一個(gè)getter和setter函數(shù)。setter函數(shù)接收一個(gè)新的fullName值，并將其拆分為firstName和lastName。當(dāng)我們修改fullName值時(shí)，firstName和lastName值也會(huì)自動(dòng)更新。