Vue基礎之計算屬性

時間 2019-12-07

標籤 vue 基礎計算屬性简体版

原文原文鏈接

適用場景

設想一個場景，你須要獲得一個複雜運算/邏輯的返回值，利用模板內的表達又過長且難以閱讀和維護，這時計算屬性就能夠很好的解決你的問題。看下面的例子：html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>computed</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{message.split(' ').reverse().join(' ')}}
  </div>
  <script>
    new Vue({
      el: "#app",
      data () {
        return {
          message: 'Hello world!'
        }
      }
    })
  </script>
</body>
</html>

{{message.split(' ').reverse().join(' ')}}這個表達式共進行了三種操做，但看起來並非很清晰，而且當咱們想在其餘地方也用到最終值時就須要複製、粘貼冗長的一大段代碼，因此這時候計算屬性就能夠及時的發揮它巨大的做用。vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>computed</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{reverseText}}
    <hr>
    {{reverseText}}
    <hr>
    {{reverseText}}
  </div>
  <script>
    new Vue({
      el: "#app",
      data () {
        return {
          message: 'Hello world!'
        }
      },
      // 計算屬性
      computed: {
        reverseText () {
          return this.message.split(' ').reverse().join(' ')
        }
      }
    })
  </script>
</body>
</html>

這時，咱們就能夠輕鬆應用結果在多個地方，並且代碼還看起來更清晰了。npm

使用方法

在計算屬性computed裏能夠完成各類複雜的邏輯（運算、函數調用），全部的計算屬性以函數的形式寫在computed裏，最終返回計算結果，當message（data數據）有任何變化，計算屬性會同時更新，而且更新視圖。緩存

每一個計算屬性都包括getter和setter，咱們平時默認用到的是getter來讀取。app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>computed</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    姓：{{firstName}}
    <hr>
    名：{{lastName}}
    <hr>
    姓名：{{fullName}}
  </div>
  <script>
    new Vue({
      el: "#app",
      data () {
        return {
          firstName: '鐵柱',
          lastName: '李'
        }
      },
      computed: {
        fullName: {
          // getter
          get: function() {
            return this.lastName + this.firstName
          },

          // setter
          set: function (data) {
            let name = data.split(' ')
            this.firstName = name[name.length - 1]
            this.lastName = name[0]
          }
        }
      }
    })
  </script>
</body>
</html>

默認調用時是用fullName的getter方法讀取數據，想使用set方式時：函數

<div id="app">
  姓：{{firstName}}
  <hr>
  名：{{lastName}}
  <hr>
  姓名：{{fullName = '一 枚蛋Oops'}}
</div>

計算屬性緩存

有人有可能會問，爲何不使用methods直接函數調用，這裏就要區分一下他們的區別了ui

methods：只要從新渲染就會更新，函數就會執行。this

computed：計算屬性依賴的數據變化時，它纔會從新取值，只要依賴數據不變化，它就不更新，能夠緩存數據。.net

因此到底使用哪一個屬性是依據你的項目需求，看看你需不須要緩存。code

以上是本期所有內容，欲知後事如何，請聽下回分解<(￣︶￣)↗[GO!]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。