Vue中的computed屬性詳解
今天來(lái)說(shuō)說(shuō)vue中的計(jì)算屬性computed,為了更好的理解計(jì)算屬性的好處,我們先通過(guò)一個(gè)案例來(lái)慢慢 了解計(jì)算屬性,有如下案例:定義兩個(gè)輸入框以及一個(gè)span標(biāo)簽,span標(biāo)簽中的內(nèi)容為兩個(gè)輸入框中的值,span標(biāo)簽中的內(nèi)容隨著輸入框中的內(nèi)容變化而變化
插值表達(dá)式
我們先用插值表達(dá)式的方法來(lái)實(shí)現(xiàn)這一效果
<body> <div id="app"> 姓: <input type="text" v-model=firstName> </br> </br> 名: <input type="text" v-model=lastName></br> </br> 姓名: <span>{{firstName}}{{lastName}}</span> ? </div> </body> <script type="text/javascript"> new Vue({ el: "#app", data: { firstName: '張', lastName: '三' }, methods: { } }) ? </script>
我們可以發(fā)現(xiàn)能簡(jiǎn)單實(shí)現(xiàn)我們所需要的效果,但是如果現(xiàn)在我想要添加另外的要求,當(dāng)我輸入的是英文的時(shí)候就將首字母大寫(xiě),這個(gè)時(shí)候我們只能使用以下方法
<body> <div id="app"> firstName: <input type="text" v-model=firstName> </br> </br> lastName: <input type="text" v-model=lastName></br> </br> fullName: <span>{{firstName.replace(firstName[0],firstName[0].toUpperCase())}} {{lastName.replace(lastName[0],lastName[0].toUpperCase())}}</span> ? </div> </body> <script type="text/javascript"> var str = '' ? new Vue({ el: "#app", data: { firstName: 'joe', lastName: 'lili' }, methods: { } }) </script>
從插值表達(dá)式所展現(xiàn)的情況來(lái)看雖然能實(shí)現(xiàn)想要的效果但是代碼顯得特別冗長(zhǎng)不利于閱讀,這個(gè)時(shí)候想到可以向methods中添加方法來(lái)實(shí)現(xiàn)這一效果。
methods
向methods添加fullName方法
<body> <div id="app"> firstName: <input type="text" v-model=firstName> </br> </br> lastName: <input type="text" v-model=lastName></br> </br> fullName: <span>{{fullName()}}</span> ? </div> </body> <script type="text/javascript"> var str = '' ? new Vue({ el: "#app", data: { firstName: 'joe', lastName: 'lili' }, methods: { fullName() { let a = ''; let b = ''; if (this.firstName.length != 0) a = this.firstName.replace(this.firstName[0], this.firstName[0].toUpperCase()) if (this.lastName.length != 0) b = this.lastName.replace(this.lastName[0], this.lastName[0].toUpperCase()) return a + ' ' + b } } }) ? </script>
我們可以看到通過(guò)方法就能很好的解決代碼過(guò)于冗長(zhǎng)的問(wèn)題。但是又面臨了另一個(gè)問(wèn)題,我們?cè)趯W(xué)習(xí)vue中的data屬性時(shí)了解到,只要data中的數(shù)據(jù)發(fā)生變化,頁(yè)面中用到data數(shù)據(jù)的地方就會(huì)進(jìn)行更新,所以當(dāng)data數(shù)據(jù)firstName與lastName一改變就會(huì)重新調(diào)用方法fullName,在一定情況下會(huì)導(dǎo)致代碼效率低,另外,methods中的方法在插值表達(dá)式中使用了多少次就會(huì)運(yùn)行多少次。根據(jù)以上兩種方法的弊端出現(xiàn)了另一種方法,就是使用computed屬性。
computed
在computed中可以定義一些屬性:計(jì)算屬性。計(jì)算屬性的本質(zhì)其實(shí)就是一個(gè)方法,只不過(guò)在使用的時(shí)候可以直接當(dāng)做屬性來(lái)使用。具體有以下特點(diǎn)
- 計(jì)算屬性在使用時(shí)不需要加(),直接寫(xiě)名稱即可
- 如果計(jì)算屬性用到了data中的數(shù)據(jù),當(dāng)data數(shù)據(jù)發(fā)生變化時(shí),就會(huì)立即重新計(jì)算這個(gè)計(jì)算屬性的值
- 計(jì)算屬性在第一次使用時(shí)的結(jié)果會(huì)被緩存起來(lái),直到屬性中所依賴的data數(shù)據(jù)發(fā)生改變計(jì)算屬性的結(jié)果才會(huì)重新求值
<body> <div id="app"> firstName: <input type="text" v-model=firstName> </br> </br> lastName: <input type="text" v-model=lastName></br> </br> fullName: <span>{{fullName}}</span></br> </br> fullName: <span>{{fullName}}</span></br> </br> fullName: <span>{{fullName}}</span> ? </div> </body> <script type="text/javascript"> var str = '' ? new Vue({ el: "#app", data: { firstName: 'joe', lastName: 'lili' }, computed: { //get的作用?當(dāng)讀取fullName時(shí),get就會(huì)被調(diào)用,且返回值就是fullName的值 //get什么時(shí)候被調(diào)用?1.當(dāng)?shù)谝淮巫x取fullName時(shí)。2.當(dāng)所依賴的data數(shù)據(jù)發(fā)生變化時(shí) fullName: { get() { console.log('hi,我調(diào)用了computed') let a = ''; let b = ''; if (this.firstName.length != 0) a = this.firstName.replace(this.firstName[0], this.firstName[0].toUpperCase()) if (this.lastName.length != 0) b = this.lastName.replace(this.lastName[0], this.lastName[0].toUpperCase()) return a + ' ' + b } } } }) </script> </html>
在前面我們說(shuō)過(guò)methods中的方法在頁(yè)面中使用n次便會(huì)調(diào)用n次,而computed中的屬性卻不會(huì)出現(xiàn)上面的情況。上面代碼中我們?cè)陧?yè)面中使用了同一計(jì)算屬性3次卻只輸出了1次結(jié)果,同樣使用methods中的full方法卻輸出了3次結(jié)果,意味著方法調(diào)用了3次。為什么會(huì)有這樣的結(jié)果?這都是因?yàn)閏omputed中有緩存機(jī)制而methods中并沒(méi)有。在代碼解析到第一個(gè)fullName時(shí)就會(huì)對(duì)fullName的結(jié)果進(jìn)行緩存,而到第二個(gè)、第三個(gè)時(shí)會(huì)發(fā)現(xiàn)緩存中已經(jīng)有了,那么就不會(huì)在對(duì)其進(jìn)行調(diào)用。
對(duì)computed的使用有了大致的了解后, 我們?cè)賮?lái)對(duì)computed補(bǔ)充一下。
在computed我們可以通過(guò)給計(jì)算屬性添加set方法達(dá)到賦值效果
<body> <div id="app"> firstName: <input type="text" v-model=firstName> </br> </br> lastName: <input type="text" v-model=lastName></br> </br> fullName: <span>{{fullName}}</span></br> </br> </div> </body> <script type="text/javascript"> var str = '' ? var app = new Vue({ el: "#app", data: { firstName: 'joe', lastName: 'lili' }, computed: { //get的作用?當(dāng)讀取fullName時(shí),get就會(huì)被調(diào)用,且返回值就是fullName的值 //get什么時(shí)候被調(diào)用?1.當(dāng)?shù)谝淮巫x取fullName時(shí)。2.當(dāng)所依賴的data數(shù)據(jù)發(fā)生變化時(shí) fullName: { get() { console.log(this) return this.firstName + this.lastName }, set(val) { this.firstName = val[0] this.lastName = val[1] } } } }) ? </script>
我們可以看到當(dāng)在控制臺(tái)對(duì)fullName賦值時(shí)firstName以及l(fā)astName都會(huì)改變
如果計(jì)算屬性中只有g(shù)et沒(méi)有set的話可以直接像下面代碼這樣寫(xiě)
computed: { fullName(){ console.log(this) return this.firstName + this.lastName } }
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
- Vue computed計(jì)算屬性的使用方法
- vue計(jì)算屬性computed的使用方法示例
- vue計(jì)算屬性computed方法內(nèi)傳參方式
- Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性
- Vue.js第三天學(xué)習(xí)筆記(計(jì)算屬性computed)
- Vue中計(jì)算屬性computed的示例解讀
- Vue computed 計(jì)算屬性代碼實(shí)例
- 深入理解Vue Computed計(jì)算屬性原理
- vue.js計(jì)算屬性computed用法實(shí)例分析
- Vue.js中computed屬性高效的數(shù)據(jù)處理案例
相關(guān)文章
Vue 2閱讀理解之initRender與callHook組件詳解
這篇文章主要為大家介紹了Vue 2閱讀理解之initRender與callHook組件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝實(shí)例
組件(Component) 是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝的相關(guān)資料,需要的朋友可以參考下2021-09-09Vue3中如何修改父組件傳遞到子組件中的值(全網(wǎng)少有!)
大家都知道,vue是具有單向數(shù)據(jù)流的傳遞特性,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何修改父組件傳遞到子組件中值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04使用Vue+Django+Ant Design做一個(gè)留言評(píng)論模塊的示例代碼
這篇文章主要介紹了使用Vue+Django+Ant Design做一個(gè)留言評(píng)論模塊,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06el-table實(shí)現(xiàn)嵌套表格的展示功能(完整代碼)
el-table中在嵌套一個(gè)el-table,這樣數(shù)據(jù)格式就沒(méi)問(wèn)題了,主要就是樣式,將共同的列放到一列中,通過(guò)渲染自定義表頭render-header,將表頭按照合適的寬度渲染出來(lái),本文給大家分享el-table實(shí)現(xiàn)嵌套表格的展示功能,感興趣的朋友一起看看吧2024-02-02用vue構(gòu)建多頁(yè)面應(yīng)用的示例代碼
這篇文章主要介紹了用vue構(gòu)建多頁(yè)面應(yīng)用的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的原理以及響應(yīng)式數(shù)據(jù)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問(wèn)題
這篇文章主要介紹了解決VUE 在IE下出現(xiàn)ReferenceError: Promise未定義的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11