computed的寫法
在vue2x中，computed option語(yǔ)法有2種格式挪圾。一種是函數(shù)寫法，一種是對(duì)戲那個(gè)寫法
函數(shù)寫法
computed: {
fullName () {
...
}
}
對(duì)象寫法
computed: {
fullName: {
get: function () {
...
},
set: function () {
...
}
}
}
<b>小提示：</b>set方法只有在屬性值發(fā)生邊改時(shí)才會(huì)觸發(fā)
computed的應(yīng)用場(chǎng)景
總的來(lái)說(shuō)盲泛，computed的誕生其實(shí)是為了解決頻繁計(jì)算的問(wèn)題疗隶。
比如說(shuō)以前我們要計(jì)算單價(jià)和數(shù)量得到合計(jì)，會(huì)寫一個(gè)method方法來(lái)計(jì)算糕韧，值發(fā)生改變的時(shí)候都會(huì)去執(zhí)行這個(gè)方法枫振，這樣寫固然沒(méi)有問(wèn)題，不過(guò)這樣的寫法不是最優(yōu)雅的方案萤彩，因?yàn)樗鼤?huì)頻繁的執(zhí)行粪滤，消耗性能，所以computed來(lái)了雀扶。
computed還有其他很多場(chǎng)景杖小，但其實(shí)都是為了解決這樣的問(wèn)題肆汹，降低損耗，提升性能
computed的作用
- computed計(jì)算屬性依賴于其他屬性和數(shù)據(jù)來(lái)計(jì)算值予权，只有數(shù)據(jù)發(fā)生改變昂勉，它才會(huì)執(zhí)行，且只執(zhí)行一次
- computed解決了頻繁計(jì)算的問(wèn)題扫腺，提高了性能
小栗子
通過(guò)計(jì)算firstName和lastName得到fullName
<h1>我是：{{ fullName }}</h1>
<h1>我是：{{ fullNameSub }}</h1>
<br />
<button @click="onRename">通過(guò)set就可以修改屬性的值</button>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "張",
lastName: "無(wú)忌",
};
},
computed: {
// getter寫法
fullName() {
return this.firstName + this.lastName;
},
// setter寫法
fullNameSub: {
get: function () {
return this.firstName + this.lastName;
},
set: function (newValue) {
console.log("newValue", newValue);
console.log("值更新的時(shí)候會(huì)觸發(fā)set");
},
},
},
methods: {
onRename() {
this.firstName = "趙";
},
},
};
</script>
