Vue中使用計算屬性的知識點總結

計算屬性

有些時候,我們在模板中放入瞭過多的邏輯,從而導致模板過重,且難以維護。例如:

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

碰到這樣的情況,我們必須看一段時間才能意識到,這裡是想要顯示變量message的翻轉字符串,而且,一旦我們想要在模板中多次使用翻轉字符串時,會更加麻煩。 所以,當我們處理復雜邏輯時,都應該使用計算屬性。

基礎用法

計算屬性是Vue配置對象中的屬性,使用方式如下:

<div id="app">
   <!-- 計算屬性的值可以像data數據一樣,直接被使用 -->
  {{ someComputed }}
</div>
const vm = new Vue({
  el: '#app',
  computed: {
     // 返回的值,就是計算屬性的值
    someComputed () {
      return 'some values'
    }
  }
})

例如,我們想要獲取到一串字符串的翻轉字符串,我們可以利用計算屬性來做:

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

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

計算屬性 vs 方法

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

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

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

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

在上面的例子中我們可以看到,一旦更改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,
  },
]

知識點擴展:

實例擴展

<div id="app1"></div>

    <div id="app2">
        {
<!-- -->{reverseMes}}
    </div>
let vm1 = new Vue({
            el:'#app1',
            data:{
                mes:'hello'
            }
        })

        let vm2 = new Vue({
            el:'#app2',
            computed: {
                reverseMes(){
                    // 使用實例 vm1中的data數據中心的 mes 去做反轉字符串的操作
                    return vm1.mes.split('').reverse().join('')
                }
            }
        })

實例vm1中的數據,vm2計算屬性也可以使用

自定義的計算屬性除瞭可以在插值表達式中使用,還可以在 v-bind: 屬性綁定中使用,用來做一些樣式的變換等等。

以上就是Vue中使用計算屬性的知識點總結的詳細內容,更多關於Vue中怎麼使用計算屬性的資料請關註WalkonNet其它相關文章!

推薦閱讀: