VUE-計算屬性的用法

Vue.js 計算屬性

計算屬性關鍵詞: computed。

計算屬性在處理一些複雜邏輯時是很有用的。

<template>
  <div>
    <h1>首頁</h1>
    {{ count }}
</template>
           

說明：

    1）本來上面的{{ count }}可以寫成{{ $store.state.count }}，通過計算屬性處理後，會變得簡單；

    2）通過計算屬性，可以讓模闆變得更清晰、簡單；

    3）一些複雜的，需要邏輯處理、計算出來的，可以采用計算屬性；

<script>
    export default {
      //計算屬性
      computed:{
        count(){
          return this.$store.state.count; //擷取計數器
        }
      },
      methods:{
       
      }
    }
</script>
           

說明：

     1）一個簡單點計算屬性例子；

computed vs methods

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基于它的依賴緩存，隻有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。

可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。

computed setter

computed 屬性預設隻有 getter ，不過在需要時你也可以提供一個 setter ：

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 調用 setter， vm.name 和 vm.url 也會被對應更新
vm.site = '星雲看闆 http://www.starcloudteam.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
           

說明：

     1）vm.site，其實就是調用鍊site計算屬性中的setter；