溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
前面的話
一般地，當(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)的，也就是說值的任何改變都是觸發(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ù)來定義計(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ù)來定義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提供了一種通用的方式來觀察和響應(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ù)來定義 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ù)，用來停止觸發(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()，來取消觀察。點(diǎn)擊按鈕時(shí)，a的值仍然會(huì)變化，但是不再觸發(fā)watch的回調(diào)函數(shù)
以上這篇基于Vue實(shí)例對(duì)象的數(shù)據(jù)選項(xiàng)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼