Vue數據相關屬性總結

vue中的數據相關屬性不夠簡單，並且相同實現還能互相轉化，有時也拿不許該用哪一種屬性。接下來，本文將整理一下各類數據相關屬性的使用場景及限制，供使用vue的初學者參考。

首先，整理一下數據相關屬性有：

• data

• v-model

• computed

• props

• watch 

data

data屬性是vue中最簡單的數據屬性，表明這個vue實例的一項數據，其定義方式以下：

const app = new Vue({  
  data: {    
    message: '...',  
  }
})

其引用方式以下：

app.message = '...'
// 或者在template中，如：綁定到title屬性上
<div :title="message"></div> 

// 也可用{{}}在模板中實現數據綁定
<div>{{ message }}</div>

注意一下，Vue組件定義時，data必須是function：

const Component = Vue.extend({  
    data: function () {    
        return { a: 1 }  
    }
})

v-model

v-model能夠在表單控件或組件上創建雙向綁定關係，本質上是一項語法糖，與data屬性配合使用。

實現雙向綁定的定義方法以下：

// 定義方法，組件與表單控件相同
<input v-model="something">

這只是一個語法糖，本質上是綁定了input控件的value屬性與input事件。

// 表單控件中v-model的本質實現
<input :value="something" @input="something = $event.target.value">

而組件中的本質實現以下：

// 自定義組件中v-model的本質實現
<custom-input :value="something" @input="something = argunments[0]">

可見，v-model在自定義組件中的使用將會自動綁定上input事件，自定義組件在檢測到value改變時，能夠觸發input事件：this.$emit('input', newValue) 將value的改變傳遞到父組件的something屬性中。

computed

計算屬性，用於在模板中綁定複雜的邏輯，當依賴的屬性改變時該計算屬性也隨之改變。

定義方法：

const app = new Vue({  
  computed: {    
    reversedMessage() {      
      return ...    
    }  
  }
})

計算屬性的特性「當依賴的屬性改變時該計算屬性也隨之改變」，也能夠由函數的方式來實現。函數方式實現的代碼以下所示：

const app = new Vue({
  methods: {
    reversedMessage() {
      return ...
    }
  }
})
<div>{{ reversedMessage() }}</div>

兩種方式結果雖相同，但計算屬性是基於依賴緩存，只有在它的相關依賴發生改變時纔會從新取值，而沒必要每次都執行函數更新屬性值。

計算屬性的引用方法同data屬性，可做爲模板中數據綁定也可綁定爲組件屬性，此處再也不累述。

props

props用於父組件向子組件中傳遞數據，其在組件中定義與使用方法以下：

Vue.component('child', {
  props: ['myMessage'],
})
<child my-message="...">
<child :my-message="tempValue">

注意：props中駝峯命名法而在組件屬性中是短橫線命名法。

watch

watch用於觀察屬性發送變化後，作額外處理。

與computed屬性的差異在於做用對象不一樣，watch觀察變化的源頭，而computed屬性是變化的目標，固然，二者能夠互相轉換。二者如何取捨在於：變化的源與目標哪部分的屬性更多，若是多個源屬性變化影響一個目標屬性則建議使用computed；相反，如一個源屬性變化影響了多個目標屬性，則建議採用watch。

如欲實現由first name和last name組合一塊兒的full name，可由watch實現：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

而用computed屬性實現，則更精簡一些：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

總結

Vue中數據相關屬性衆多，確實讓初學者一時不知該如何選擇。經過本文，咱們能夠知道每一個屬性被設計出來的目的、使用場景，及特性甚至更深層的實現原理，如此即可應對大部分選擇屬性的情形。