亚洲一区二区三区小说,西西大尺度美軳人人体bt,韩国漂亮老师做爰2

轉自https://www.cnblogs.com/xiaohuochai/p/7294208.html

前面的話

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

data

data是Vue實例的數據對象。Vue將會遞歸將data的屬性轉換為getter/setter，從而讓data屬性能響應數據變化

[注意]不應該對data屬性使用箭頭函數

[

復制代碼

](javascript:void(0); "復制代碼")

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><script>
var values = {message: 'Hello Vue!'} var vm = new Vue({
el: '#app',
data: values
})
console.log(vm); </script></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

image

Vue實例創建之后，可以通過vm.$data訪問原始數據對象

image

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

[

復制代碼

](javascript:void(0); "復制代碼")

[

復制代碼

](javascript:void(0); "復制代碼")

被代理的屬性是響應的，也就是說值的任何改變都是觸發視圖的重新渲染。設置屬性也會影響到原始數據，反之亦然

image

但是，以_或$開頭的屬性不會被Vue實例代理，因為它們可能和Vue內置的屬性或方法沖突。可以使用例如vm.$data._property的方式訪問這些屬性

[

復制代碼

](javascript:void(0); "復制代碼")

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><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></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

computed

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

[注意]不應該使用箭頭函數來定義計算屬性函數

下面是關于computed的一個例子

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><div id="example">
<p>原始字符串: "{{ message }}"</p>
<p>反向字符串: "{{ reversedMessage }}"</p>
</div></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><script>
var vm = new Vue({
el: '#example',
data: {
message: '小火柴' },
computed: {
reversedMessage: function () { return this.message.split('').reverse().join('')
}
}
}) </script></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

結果如下

image

這里聲明了一個計算屬性 reversedMessage 。提供的函數將用作屬性 vm.reversedMessage 的 getter

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;">console.log(vm.reversedMessage) // -> '柴火小'
vm.message = 'Goodbye' console.log(vm.reversedMessage) // -> 'eybdooG'</pre>

vm.reversedMessage 的值始終取決于 vm.message 的值。可以像綁定普通屬性一樣在模板中綁定計算屬性。當 vm.message 發生改變時，所有依賴于 vm.reversedMessage 的綁定也會更新

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

image

【setter】

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

[

復制代碼

](javascript:void(0); "復制代碼")

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><script>
var vm = new Vue({
data: { a: 1 },
computed: { // 僅讀取，值只須為函數
aDouble: function () { return this.a * 2 }, // 讀取和設置
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></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

methods

通過調用表達式中的 methods 也可以達到同樣的效果

[注意]不應該使用箭頭函數來定義methods函數

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><div id="example">
<p>原始字符串: "{{ message }}"</p>
<p>反向字符串: "{{ reversedMessage() }}"</p>
</div></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><script>
var vm = new Vue({
el: '#example',
data: {
message: '小火柴' },
methods: {
reversedMessage: function () { return this.message.split('').reverse().join('')
}
}
}) </script></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

【緩存】

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

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

相比而言，只要發生重新渲染，method 調用總會執行該函數。如下所示

[

復制代碼

](javascript:void(0); "復制代碼")

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><script>
var vm = new Vue({
el: '#example',
computed:{
time1: function () { return (new Date()).toLocaleTimeString()
}
},
methods: {
time2: function () { return (new Date()).toLocaleTimeString()
}
}
}) </script></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

image

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

watch

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

[注意]不應該使用箭頭函數來定義 watch 函數

[

復制代碼

](javascript:void(0); "復制代碼")

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><script>
var vm = new Vue({
el: '#app',
data: {
a: 1,
message:'' },
watch: {
a: function (val, oldVal) { this.message = 'a的舊值為' + oldVal + '，新值為' + val;
}
}
}) </script></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

上面代碼中，當a的值發生變化時，通過watch的監控，使message輸出相應的內容

【$watch】

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

[

復制代碼

](javascript:void(0); "復制代碼")

<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><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></pre>

[

復制代碼

](javascript:void(0); "復制代碼")

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

image

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Vue實例對象的數據選項

Vue實例對象的數據選項

前面的話