快捷導(dǎo)航

基于Vue實(shí)例對(duì)象的數(shù)據(jù)選項(xiàng)

更新時(shí)間：2017年08月09日 07:58:06 投稿：jingxian

下面小編就為大家?guī)?lái)一篇基于Vue實(shí)例對(duì)象的數(shù)據(jù)選項(xiàng)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

前面的話

一般地，當(dāng)模板內(nèi)容較簡(jiǎn)單時(shí)，使用data選項(xiàng)配合表達(dá)式即可。涉及到復(fù)雜邏輯時(shí)，則需要用到methods、computed、watch等方法。本文將詳細(xì)介紹Vue實(shí)例對(duì)象的數(shù)據(jù)選項(xiàng)

data

data是Vue實(shí)例的數(shù)據(jù)對(duì)象。Vue將會(huì)遞歸將data的屬性轉(zhuǎn)換為getter/setter，從而讓data屬性能響應(yīng)數(shù)據(jù)變化

[注意]不應(yīng)該對(duì)data屬性使用箭頭函數(shù)

<div id="app">
 {{ message }}
</div>

<script>
var values = {message: 'Hello Vue!'}
var vm = new Vue({
 el: '#app',
 data: values
})
console.log(vm);
</script>

Vue實(shí)例創(chuàng)建之后，可以通過vm.$data訪問原始數(shù)據(jù)對(duì)象

console.log(vm.$data);

Vue實(shí)例也代理了data對(duì)象上所有的屬性

<script>
var values = {message: 'Hello Vue!'}
var vm = new Vue({
 el: '#app',
 data: values
})
console.log(vm.$data === values);//true
console.log(vm.message);//'Hello Vue!'
console.log(vm.$data.message);//'Hello Vue!'
</script>

被代理的屬性是響應(yīng)的，也就是說(shuō)值的任何改變都是觸發(fā)視圖的重新渲染。設(shè)置屬性也會(huì)影響到原始數(shù)據(jù)，反之亦然

但是，以_或$開頭的屬性不會(huì)被Vue實(shí)例代理，因?yàn)樗鼈兛赡芎蚔ue內(nèi)置的屬性或方法沖突。可以使用例如vm.$data._property的方式訪問這些屬性

<script>
var values = {
 message: 'Hello Vue!',
 _name: '小火柴'
}
var vm = new Vue({
 el: '#app',
 data: values
})
console.log(vm._name);//undefined
console.log(vm.$data._name);//'小火柴'
</script>

computed

計(jì)算屬性函數(shù)computed將被混入到Vue實(shí)例中。所有g(shù)etter和setter的this上下文自動(dòng)地綁定為Vue實(shí)例

[注意]不應(yīng)該使用箭頭函數(shù)來(lái)定義計(jì)算屬性函數(shù)

下面是關(guān)于computed的一個(gè)例子

<div id="example">
 <p>原始字符串: "{{ message }}"</p>
 <p>反向字符串: "{{ reversedMessage }}"</p>
</div>

<script>
var vm = new Vue({
 el: '#example',
 data: {
 message: '小火柴'
 },
 computed: {
 reversedMessage: function () {
  return this.message.split('').reverse().join('')
 }
 }
})
</script>

結(jié)果如下

這里聲明了一個(gè)計(jì)算屬性 reversedMessage 。提供的函數(shù)將用作屬性 vm.reversedMessage 的 getter

console.log(vm.reversedMessage) // -> '柴火小'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'

結(jié)果如下圖所示，vm.reversedMessage依賴于vm.message的值，vm.reversedMessage本身并不能被賦值

【setter】

計(jì)算屬性默認(rèn)只有 getter ，不過在需要時(shí)也可以提供一個(gè) setter

<script>
var vm = new Vue({
 data: { a: 1 },
 computed: {
 // 僅讀取，值只須為函數(shù)
 aDouble: function () {
  return this.a * 2
 },
 // 讀取和設(shè)置
 aPlus: {
  get: function () {
  return this.a + 1
  },
  set: function (v) {
  this.a = v - 1
  }
 }
 }
})
console.log(vm.aPlus);//2
vm.aPlus = 3
console.log(vm.a);//2
console.log(vm.aDouble);//4
</script>

methods

通過調(diào)用表達(dá)式中的 methods 也可以達(dá)到同樣的效果

[注意]不應(yīng)該使用箭頭函數(shù)來(lái)定義methods函數(shù)

<div id="example">
 <p>原始字符串: "{{ message }}"</p>
 <p>反向字符串: "{{ reversedMessage() }}"</p>
</div>

<script>
var vm = new Vue({
 el: '#example',
 data: {
 message: '小火柴'
 },
 methods: {
 reversedMessage: function () {
  return this.message.split('').reverse().join('')
 }
 } 
})
</script>

【緩存】

對(duì)于最終的結(jié)果，兩種方式確實(shí)是相同的

然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)

相比而言，只要發(fā)生重新渲染，method 調(diào)用總會(huì)執(zhí)行該函數(shù)。如下所示

<div id="example">
 <p>計(jì)算屬性: "{{ time1 }}"</p>
 <p>methods方法: "{{ time2() }}"</p>
</div>

<script>
var vm = new Vue({
 el: '#example',
 computed:{
 time1: function () {
  return (new Date()).toLocaleTimeString()
 }
 },
 methods: {
 time2: function () {
  return (new Date()).toLocaleTimeString()
 }
 } 
})
</script>

假設(shè)有一個(gè)性能開銷比較大的的計(jì)算屬性A，它需要遍歷一個(gè)極大的數(shù)組和做大量的計(jì)算。可能有其他的計(jì)算屬性依賴于 A 。如果沒有緩存，將不可避免的多次執(zhí)行A的getter！如果不希望有緩存，則用 method 替代

watch

Vue提供了一種通用的方式來(lái)觀察和響應(yīng)Vue實(shí)例上的數(shù)據(jù)變動(dòng)：watch屬性。watch屬性是一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)，回調(diào)函數(shù)得到的參數(shù)為新值和舊值。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用$watch()，遍歷watch對(duì)象的每一個(gè)屬性

[注意]不應(yīng)該使用箭頭函數(shù)來(lái)定義 watch 函數(shù)

<div id="app">
 <button @click="a++">a加1</button>
 <p>{{ message }}</p>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {
 a: 1,
 message:''
 },
 watch: {
 a: function (val, oldVal) {
  this.message = 'a的舊值為' + oldVal + '，新值為' + val;
 }
 }
})
</script>

上面代碼中，當(dāng)a的值發(fā)生變化時(shí)，通過watch的監(jiān)控，使message輸出相應(yīng)的內(nèi)容

【$watch】

除了使用數(shù)據(jù)選項(xiàng)中的watch方法以外，還可以使用實(shí)例對(duì)象的$watch方法，該方法的返回值是一個(gè)取消觀察函數(shù)，用來(lái)停止觸發(fā)回調(diào)

<div id="app">
 <button @click="a++">a加1</button>
 <p>{{ message }}</p>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {
 a: 1,
 message:''
 }
})
var unwatch = vm.$watch('a',function(val, oldVal){
 if(val === 10){
 unwatch();
 }
 this.message = 'a的舊值為' + oldVal + '，新值為' + val; 
})
</script>

上面的代碼中，當(dāng)a的值更新到10時(shí)，觸發(fā)unwatch()，來(lái)取消觀察。點(diǎn)擊按鈕時(shí)，a的值仍然會(huì)變化，但是不再觸發(fā)watch的回調(diào)函數(shù)