<!--計(jì)算屬性：1. 定義：要用的屬性不存在，要通過(guò)已有的屬性計(jì)算得來(lái)2. 原理：底層借助了 Object.defineProperty 方法提供的 getter 和 setter3. get 函數(shù)什么時(shí)候執(zhí)行？(1). 初次讀取時(shí)會(huì)執(zhí)行一次(2). 當(dāng)依賴的數(shù)據(jù)發(fā)生改變時(shí)會(huì)被再次調(diào)用4. 優(yōu)勢(shì)：與 methods 實(shí)現(xiàn)相比，內(nèi)部有緩存機(jī)制（復(fù)用），效率高，調(diào)試方便5. 備注：1. 計(jì)算屬性最終會(huì)出現(xiàn)在 vm 上，直接讀取使用即可2. 如果計(jì)算屬性要被修改，那必須寫在 set 函數(shù)去響應(yīng)修改，且 set 中要引起計(jì)算時(shí)依賴的數(shù)據(jù)發(fā)生改變 --> <div id="root"><ul><li>姓：<input type="text" v-model="firstName"></li><li>名：<input type="text" v-model="lastName"></li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li><li>全名：{{getFullName}}</li></ul> </div> <script src="../js/vue.js"></script> <script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {firstName: '張',lastName: '三'},computed: {getFullName: {get() {console.log(1);console.log('已通過(guò) get 方式獲取到了 getFullName 這個(gè)計(jì)算屬性的值');return this.firstName + ' - ' + this.lastName;},set(value) {console.log('已通過(guò) set 方式修改了 getFullName 這個(gè)計(jì)算屬性的值');let arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}}}}); </script> <script src="../js/vue.js"></script> <script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {firstName: '張',lastName: '三'},computed: {getFullName: {get() {console.log(1);console.log('已通過(guò) get 方式獲取到了 getFullName 這個(gè)計(jì)算屬性的值');return this.firstName + ' - ' + this.lastName;},set(value) {console.log('已通過(guò) set 方式修改了 getFullName 這個(gè)計(jì)算屬性的值');let arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}}}}); </script>

Vue 計(jì)算屬性的簡(jiǎn)寫

computed: {// 原來(lái)的寫法getFullName: {get() {console.log(1);console.log('已通過(guò) get 方式獲取到了 getFullName 這個(gè)計(jì)算屬性的值');return this.firstName + ' - ' + this.lastName;},set(value) {console.log('已通過(guò) set 方式修改了 getFullName 這個(gè)計(jì)算屬性的值');let arr = value.split('-');this.firstName = arr[0];this.lastName = arr[1];}}// 如果只是讀取(getter), 就可以寫成這種形式getFullName() {console.log('get 被調(diào)用了');return this.firstName + '-' + this.lastName;} }

總結(jié)

以上是生活随笔為你收集整理的Vue 计算属性 computed的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。