如何在Vue中計(jì)算屬性

本篇文章為大家展示了如何在Vue中計(jì)算屬性，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

1、計(jì)算屬性

像綁定普通屬性一樣在模板中綁定計(jì)算屬性。例如reverseName屬性依賴于firstName和lastName，當(dāng)firstName或lastName發(fā)生改變時(shí)，依賴于它的 reverseName 也會更新。

利用函數(shù)方法也可以實(shí)現(xiàn)類似的效果，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。只有在它的相關(guān)依賴發(fā)生改變時(shí)才會重新求值。這就意味著只要 firstName 還沒有發(fā)生改變，再次訪問 reversedName 計(jì)算屬性會立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會再次執(zhí)行函數(shù).

為什么需要緩存？假設(shè)我們有一個(gè)性能開銷比較大的的計(jì)算屬性 A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性 B 依賴于 A 。如果使用函數(shù)，每獲得一次B就要調(diào)用一次函數(shù)進(jìn)行計(jì)算，造成很大開銷！

計(jì)算屬性默認(rèn)為get方法，也可以設(shè)定set方法，接收傳入處理數(shù)據(jù)。例如傳入originalName，set方法對其進(jìn)行拆解并復(fù)制給firstName與lastName，并引起firstName與lastName改變，調(diào)用get()方法。

<div id="app">
    <p>{{originalName}}</p>
    <p>{{reverseName}}</p>
    <button @click="deal()">反轉(zhuǎn)名字</button>
</div>

let vue=new Vue({
    el:'#app',
    data:{
      firstName:'',
      lastName:'',
      originalName:"super tory"
    },
    methods:{
      deal(){
        this.reverseName=this.originalName;
      }
    },
    computed:{            //計(jì)算屬性鉤子
      reverseName:{
        set(string){  //通過set方法對傳入?yún)?shù)this.originalName進(jìn)行操作
          let name=string.split(' ');
          this.firstName=name[1];
          this.lastName=name[0];
        },
        get(){      //通過get方法返回值
          return this.firstName+' '+this.lastName;
        }
      }
    }
});

2、偵聽器watch

在Vue中提供一個(gè)鉤子，偵聽data中的某個(gè)變量是否改變，如果改變則執(zhí)行響應(yīng)函數(shù)。

<div id="app2">
  <input v-model="listen">
</div>

let vue2=new Vue({
  el:'#app2',
  data:{
    listen:''
  },
  watch:{      //定義偵聽器鉤子
    listen:function () {  //定義函數(shù)偵聽listen的變化
      console.log("input內(nèi)容發(fā)生改變");
    }
  }
});

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

上述內(nèi)容就是如何在Vue中計(jì)算屬性，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。