1.Vue視圖數據響應式更新
// 我們的數據對象
var data = { a: 1 }
// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
data: data
})
// 獲得這個實例上的屬性
// 返回源數據中對應的字段
vm.a == data.a // => true
// 設置屬性也會影響到原始數據
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
注釋:
1则涯。 data中所有的值都掛在vm實例中,當修改vm 實例中的屬性值時data中的值回相應改變冲簿。且視圖重新渲染粟判。反之同理
2。值得注意的是只有在data中定義的屬性發(fā)生變化的時候試圖才會被渲染峦剔,如果在試圖中沒有定義的數據如(vm.text = 1) 發(fā)生改變不會觸發(fā)視圖的改變档礁,如需要改數據也是響應式的只需在data中初始化該值即可
2.object.freeze() 阻止數據視圖相應
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 這里的 `foo` 不會更新! -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
- 在vue 中除了數據屬性吝沫,Vue還暴露了許多實例方法呻澜。他們都以前綴 $開頭。如下
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true 獲取實例中的data
vm.$el === document.getElementById('example') // => true 獲取實例掛在的dom
// $watch 是一個實例方法 監(jiān)聽屬性可以監(jiān)聽路由惨险,數據的變化(對 對象數據的監(jiān)聽有一定的變化詳細見后)
vm.$watch('a', function (newValue, oldValue) {
// 這個回調將在 `vm.a` 改變后調用
})