Vue中常用的計(jì)算屬性（computed），可以實(shí)時監(jiān)聽數(shù)據(jù)的變化并自動進(jìn)行一些邏輯處理。而computed中的一個重要的概念就是computed屬性的相互依賴關(guān)系。

在某些情況下，我們需要在computed中使用多個屬性進(jìn)行計(jì)算。這時候computed的依賴關(guān)系就有了追蹤的難度，這時候就需要用到computed的另一個強(qiáng)大功能，即computed的屬性依賴關(guān)系懶解析（lazy evaluation）。

Vue.component('computed-depend', {
	data: () =>({
tag: 'h1',
text: '我是標(biāo)題',
color: 'red'
	}),
	computed: {
// 使用get方法返回一個對象包含函數(shù)
style () {
return {
'color': this.color
}
},
render () {
return `<${this.tag} style="${JSON.stringify(this.style)}">${this.text}`
}
	}
})

如果我們直接在computed中依次訪問三個屬性，那么每次訪問都會觸發(fā)對應(yīng)的get函數(shù)，這顯然是效率很低的。我們可以使用computed中的lazy選項(xiàng)，將computed中的依賴關(guān)系懶解析。

Vue.component('computed-lazy', {
	data: () =>({
price: 100,
count: 3,
discount: 0.8
	}),
	computed: {
lazy () {
return {
price: this.price,
count: this.count
}
},
total: {
lazy: true,
get () {
return this.lazy.price * this.lazy.count * this.discount
}
}
	}
})

上述例子中，我們使用了lazy選項(xiàng)將computed屬性total的依賴關(guān)系懶解析，只有在訪問到total屬性時，才會先進(jìn)行l(wèi)azy屬性的計(jì)算然后再進(jìn)行total的計(jì)算，從而減少了計(jì)算量，優(yōu)化了性能。