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

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

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

如果我們直接在computed中依次訪問(wèn)三個(gè)屬性，那么每次訪問(wèn)都會(huì)觸發(fā)對(duì)應(yīng)的get函數(shù)，這顯然是效率很低的。我們可以使用computed中的lazy選項(xiàng)，將computed中的依賴(lài)關(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的依賴(lài)關(guān)系懶解析，只有在訪問(wèn)到total屬性時(shí)，才會(huì)先進(jìn)行l(wèi)azy屬性的計(jì)算然后再進(jìn)行total的計(jì)算，從而減少了計(jì)算量，優(yōu)化了性能。