前面的話

隆化網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),隆化網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為隆化超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的隆化做網(wǎng)站的公司定做！

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

data

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

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

 {{ message }}

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

console.log(vm.$data);

Vue實例也代理了data對象上所有的屬性

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

但是，以_或$開頭的屬性不會被Vue實例代理，因為它們可能和Vue內(nèi)置的屬性或方法沖突?？梢允褂美?code>vm.$data._property的方式訪問這些屬性

computed

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

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

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

 
原始字符串: "{{ message }}"
 
反向字符串: "{{ reversedMessage }}"

結(jié)果如下

這里聲明了一個計算屬性 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】

計算屬性默認只有 getter ，不過在需要時也可以提供一個 setter

methods

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

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

 
原始字符串: "{{ message }}"
 
反向字符串: "{{ reversedMessage() }}"

【緩存】

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

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

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

 
計算屬性: "{{ time1 }}"
 
methods方法: "{{ time2() }}"

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

watch

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

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

 a加1
 
{{ message }}

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

【$watch】

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

 a加1
 
{{ message }}

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

以上這篇基于Vue實例對象的數(shù)據(jù)選項就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。