快捷導(dǎo)航

Vue中計算屬性computed的示例解讀

更新時間：2017年07月26日 11:49:29 作者：方式代碼

計算屬性和普通屬性一樣是在模板中綁定計算屬性的，當(dāng)data中對應(yīng)數(shù)據(jù)發(fā)生改變時，計算屬性的值也會發(fā)生改變。下面這篇文章主要給大家介紹了關(guān)于Vue中計算屬性computed的相關(guān)資料，需要的朋友可以參考下。

計算屬性

表達(dá)式是非常便利的，但是它們實際上只用于簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護(hù),所以引入了計算屬性computed,將復(fù)雜的邏輯放入計算中進(jìn)行處理，同時computed有緩存功能，防止復(fù)雜計算邏輯多次調(diào)用引起的性能問題。

computed原理

computed的屬性reversedMessage在data中會有一個對我們不可見的cacheReversedMessage屬性對應(yīng)

cacheReversedMessage的值是根據(jù)其綁定的data中的message來決定的獲取reversedMessage會返回

cacheReversedMessage的值 message更新之后會立馬調(diào)用reversedMessage的get方法去給cacheReversedMessage賦值（無論reversedMessage在dom中是否使用） cacheReversedMessage的值發(fā)生變化時，相應(yīng)的dom也會發(fā)生變化

注意：computed中的屬性和data中的屬性名字不能相同，一個屬性要么在data里；要么在computed里，computed里的屬性要跟data中的配合使用，當(dāng)data屬性發(fā)生變化時才會調(diào)用get方法更新reversedMessage的值，否則get方法即使返回一個隨機數(shù)，reversedMessage的值也不會變。

示例代碼

computed相當(dāng)于屬性的一個實時計算，如果實時計算里關(guān)聯(lián)了對象，那么當(dāng)對象的某個值改變的時候，同事會出發(fā)實時計算。

比如：

<body id="content">

 <parent :childrens="childrens"></parent>

</body>

<!-- 這個測試主要想證明： 對于計算屬性里如果關(guān)聯(lián)對象，即使對象不是組件作用域內(nèi)的，當(dāng)對象在外部改變了某個屬性，同樣會出發(fā)計算屬性的方法-->

<script>

 var parent = Vue.extend( {

 props: {

  childrens: ''

 },

 template: '<div >{{age}}</div>',

 data: function() {

  return {

  name: '',

  age: 18

  };

 },

 computed: {

  age: function() {

  return this.childrens.age +10;

  }

 },

 created: function() {

  var _parent = this.$parent;

  this._set = {};

  this._set = _parent; 

 }

 } );

 var vm = new Vue( {

 el: 'body',

 data: {

  childrens: {

  name: '小強',

  age: 20,

  sex: '男'

  }

 },

 components: {

  'parent': parent

 }

 } );

 vm.$data.childrens.age = 10;

</script>

當(dāng)vm.$data.childrens.age這個值改變的時候，動態(tài)觸發(fā)computed里的age屬性計算，最后顯示到頁面的結(jié)果是：20。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: