Vue.js學(xué)習(xí)之計(jì)算屬性

發(fā)布時(shí)間：2020-09-08 21:08:37 來(lái)源：腳本之家閱讀：113 作者：蘇打草莓欄目：web開(kāi)發(fā)

前言

計(jì)算屬性是用來(lái)聲明式的描述一個(gè)值依賴了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個(gè)計(jì)算屬性上時(shí)，Vue 會(huì)在其依賴的任何值導(dǎo)致該計(jì)算屬性改變時(shí)更新 DOM。這個(gè)功能非常強(qiáng)大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動(dòng)并且易于維護(hù)。

開(kāi)始用vue會(huì)把所有的模版上的數(shù)據(jù)都放到data屬性里，或者有的時(shí)候data屬性里變量多了之后覺(jué)得有些只是用一次的變量就直接寫到模版里了，后來(lái)看到同組的同事在用computed屬性，就又去查了一下api，發(fā)現(xiàn)這種情況其實(shí)最好用的就是computed。

1. computed可以保持模版的清晰，在template里盡量只進(jìn)行展示和綁定，而不要加入邏輯操作。

2. 用computed的還有一個(gè)好處就是會(huì)跟隨其他data屬性的變化自動(dòng)變化

比如官方文檔的一個(gè)例子：

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 }
})
vm.$watch('firstName', function (val) {
 this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
 this.fullName = this.firstName + ' ' + val
})

如果用watch就會(huì)產(chǎn)生代碼的冗余，比如在直播中狀態(tài)的變化就可以用來(lái)計(jì)算是否展示視頻之類的上層屬性

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

總結(jié)

以上就是關(guān)于Vue.js的計(jì)算屬性的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

向AI問(wèn)一下細(xì)節(jié)

Vue.js學(xué)習(xí)之計(jì)算屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽