如果你已經(jīng)熟悉Vue，那么你一定知道computed是Vue中的一個(gè)非常重要的特性。這個(gè)特性讓我們能夠編寫計(jì)算式來計(jì)算屬性，這些計(jì)算式對(duì)于響應(yīng)式系統(tǒng)來說是非常重要的。在本文中，我將討論如何觸發(fā)computed。

computed屬性是一種特殊的屬性，它既可以作為屬性值使用，也可以被當(dāng)做getter/setter函數(shù)使用。當(dāng)我們?cè)L問computed屬性時(shí)，它就會(huì)被觸發(fā)，計(jì)算出一個(gè)新的值。如果這個(gè)屬性依賴于其他屬性，那么當(dāng)這些依賴屬性發(fā)生變化時(shí)，computed屬性也會(huì)被重新計(jì)算。

// 一個(gè)簡(jiǎn)單的computed例子
new Vue({
data: {
message: 'Hello'
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
})

在上面的例子中，我們定義了一個(gè)computed屬性reversedMessage，它依賴于message。當(dāng)message發(fā)生變化時(shí)，reversedMessage也會(huì)被重新計(jì)算。

那么，如何觸發(fā)computed屬性呢？其實(shí)，我們不需要手動(dòng)去觸發(fā)computed屬性，因?yàn)閂ue的響應(yīng)式系統(tǒng)會(huì)自動(dòng)監(jiān)測(cè)依賴關(guān)系，并在依賴發(fā)生變化時(shí)重新計(jì)算computed屬性。

比如下面這個(gè)例子：

new Vue({
data: {
firstName: 'Jack',
lastName: 'Smith'
},
computed: {
fullName: function () {
console.log('computed fullName被計(jì)算了')
return this.firstName + ' ' + this.lastName
}
},
methods: {
changeName: function () {
this.lastName = 'Lee'
}
}
})

在上面的例子中，我們定義了一個(gè)computed屬性fullName，它依賴于firstName和lastName。當(dāng)firstName和lastName任意一個(gè)屬性發(fā)生變化時(shí)，computed屬性fullName會(huì)被重新計(jì)算。

現(xiàn)在，讓我們?cè)谀０逯惺褂胒ullName：

{{ fullName }}

這時(shí)候，在控制臺(tái)中我們會(huì)看到'computed fullName被計(jì)算了'的log。這是因?yàn)閂ue使用了一個(gè)叫做依賴收集的技術(shù)，將組件的依賴關(guān)系收集起來，當(dāng)依賴發(fā)生變化時(shí)重新計(jì)算相關(guān)的computed屬性。

現(xiàn)在，讓我們?cè)诜椒ㄖ行薷膌astName，然后看一下computed屬性fullName是否被觸發(fā)：

Change Name

當(dāng)我們點(diǎn)擊按鈕時(shí)，lastName被修改了，這時(shí)控制臺(tái)中會(huì)再次出現(xiàn)'computed fullName被計(jì)算了'的log。這是因?yàn)閘astName發(fā)生了變化，fullName被依賴收集系統(tǒng)重新計(jì)算了。

除了上面提到的修改屬性值之外，還有一些其他的方式可以觸發(fā)computed屬性，比如props，$forceUpdate等。但對(duì)于大部分情況來說，我們并不需要關(guān)心這些方式，只要記住依賴關(guān)系變化時(shí)computed屬性就會(huì)被自動(dòng)觸發(fā)即可。