如何在Vue中計算屬性

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

1、計算屬性

像綁定普通屬性一樣在模板中綁定計算屬性。例如reverseName屬性依賴于firstName和lastName，當firstName或lastName發生改變時，依賴于它的 reverseName 也會更新。

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

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

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

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

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

2、偵聽器watch

在Vue中提供一個鉤子，偵聽data中的某個變量是否改變，如果改變則執行響應函數。

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

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

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

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