一文了解Vue中怎麼使用計算屬性

你知道什麼時候要用Vue計算屬性？怎麼使用計算屬性？以下這篇文章帶大家了解Vue運算屬性，介紹一下Vue運算屬性的基礎用法，希望對大家有幫助。

計算屬性

有些時候，我們在模板中放入了過多的邏輯，導致模板過重，且難以維護。例如：

<div id="app">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

碰到這樣的情況，我們必須看一段時間才能意識到，這裡是想要顯示變數message的翻轉字串，而且，一旦我們想要在模板中多次使用翻轉字符串時，會更加麻煩。所以，當我們處理複雜邏輯時，都應該使用計算屬性。 【相關推薦：《vue.js教學》】

基礎用法

計算屬性是Vue配置物件中的屬性，使用方式如下：

<div id="app">
   <!-- 计算属性的值可以像data数据一样，直接被使用 --> 
  {{ someComputed }}
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
     // 返回的值，就是计算属性的值
    someComputed () {
      return &#39;some values&#39;
    }
  }
})

例如，我們想要取得到一串字串的翻轉字串，我們可以利用計算屬性來做：

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符处啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

我們可以看到，reversedMsg的值取決於msg的值，所以，當我們改變msg的值是，reversedMsg的值也會隨之改變。

計算屬性vs 方法

其實，我們上述的功能，利用方法也可以實現，如：

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

雖然在表達式中調用方法也可以實現相同的效果，但是使用計算屬性和使用方法有著本質上的差異。當使用方法時，每一次頁面重新渲染，對應的方法都會重新執行一次，如：

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  methods: {
    reversedMsg: function () {
      console.log(&#39;方法执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;

在上面的例子中我們可以看到，一旦更改name的值，頁面會重新渲染，此刻控制台中印出方法執行啦這串字串，代表著reversedMsg這個函數執行了，但是我們並不需要該方法執行，因為改動的資料和這個函數沒有任何關係，如果這個函數內的邏輯很複雜，那麼對於效能來講，也是一種消耗。

但是利用運算屬性做，就不會有這樣的現像出現，如：

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  computed: {
    reversedMsg: function () {
      console.log('计算执行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

此時可以看到，當給資料name重新賦值時，計算屬性並沒有執行。所以，計算屬性和方法的最本質的區別，是：計算屬性是基於響應式依賴進行緩存的，計算屬性的值一直存於緩存中，只要它依賴的data資料不改變，每次存取計算屬性，都會立刻傳回快取的結果，而不是再次執行函數。而方法則是每次觸發重新渲染，呼叫方法將總是再次執行函數。

那麼，為什麼需要快取呢？

假如說，我們有一個計算屬性A，它需要遍歷一個巨大的陣列並且做巨大的計算。然後我們需要使用到這個計算屬性A，如果沒有緩存，我們就會再執行A的函數，這樣效能開銷就變得很大了。

深入計算屬性

計算屬性除了寫成一個函數之外，還可以寫成一個對象，對象內有兩個屬性，getter&setter，這兩個屬性皆為函數，寫法如下：

const vm = new Vue({
  el: '#app',
  computed: {
    fullName: {
      getter () {
         // 一些代码
      },
      setter () {
         // 一些代码
      }
    }
  }
})

getter 讀取

#在前面，我們直接將計算屬性寫成了一個函數，這個函數即為getter函數。也就是說，計算屬性預設只有getter。 getter的this，被自動綁定為Vue實例。

何時執行？

當我們去取得某一個計算屬性時，就會執行get函數。

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      }
    }
  }
})

setter 設定

可選，set函數在給計算屬性重新賦值時會執行。參數：為被重新設定的值。 setter的this，被自動綁定為Vue實例。

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

要注意，即使給計算屬性賦了值，計算屬性也不會改變，在重複一遍，只有當依賴的響應式屬性變化了，計算屬性才會重新計算。

練習_姓名篩選

personArr: [
  { 
    name: '', 
    src: '.jpg', 
    des: '颈椎不好', 
    sex: 'm', 
    id: '056482' 
  },
  { 
    name: '', 
    src: '.jpg', 
    des: '我是谁', 
    sex: 'f', 
    id: '157894' 
  },
  { 
    name: '', 
    src: '.jpg', des: '我长得很好看', 
    sex: 'f', 
    id: '2849245' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '你没有见过陌生的脸', 
    sex: 'm', 
    id: '348515' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '瓜皮刘', 
    sex: 'm', 
    id: '478454'
  }
]

練習_全選商品

courseList: [
  {
    poster: '.jpg',
    title: '',
    price: 1299,
    cart: 1,
    id: 0
  },
  {
    poster: '.jpg',
    title: '',
    price: 1148,
    cart: 1,
    id: 1595402664708
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596305473062
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1595413512182
  },
  {
    poster: '.jpg',
    title: '',
    price: 12798,
    cart: 1,
    id: 1596302161181
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596300025301,
  },
]

更多程式相關知識，請造訪：程式入門！ ！

以上是一文了解Vue中怎麼使用計算屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！