Vuejs vm對象詳解

Vuejs vm對象詳解

vue數據是怎麼驅動視圖的?
一堆數據放在那裏是不會有任何做用的，它必須經過咱們的View Model（視圖模型）才能操控視圖。

圖中的model其實就是數據，通常咱們寫成js對象的格式；

中間的這個所謂View Model，就是

var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
咱們把數據放到了vm裏，而後把各類directive放到視圖裏，這樣咱們就能夠以vm爲媒介，經過改變數據來改變視圖。

vm這個對象有哪些屬性和方法

咱們看到

var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
誤區

vm其實是Vue這個類的一個實例，很是容易混淆的是，你會很容易的覺得

vm.el == '#app';
vm.data== {
message: 'Hello Vue!'
};
vm.data.message =='Hello Vue!';
實際上這都是錯誤的，

{
el: '#app',
data: {
message: 'Hello Vue!'
}
}
這只是傳進 Vue()的一個參數，它可不是vm自己。

經過vm讀取數據

實際上，vm.messasge == 'Hello Vue!', vm的屬性是直接跟數據的key綁定的（至於怎樣綁定的如今不用管),這是一種代理屬性;

這個數據是響應式(reactive)的

var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設置vm數據會使原來的數據發生改變
vm.a = 2
data.a // -> 2
// ... 反過來亦然
data.a = 3
vm.a // -> 3
怎麼經過vm獲取其餘屬性

vm.el == '#app';
vm.data== {
message: 'Hello Vue!'
};
vm.data.message =='Hello Vue!';
以上雖然是錯誤的寫法，有時候咱們仍是但願得到這些屬性的，經過vm你須要這樣寫：

vm.$el === document.getElementById('app') // -> true
vm.$data === data // -> true
vm.$data.message ==='Hello Vue!' // -> true
這個$符表明的就是vm的真實屬性了。

詳細其餘屬性的請查閱文檔Api

不只有屬性，還有方法

vm.$watch('a', function (newVal, oldVal) {
// 當vm.a發生改變的時候，這個回調函數將會被觸發
})
詳細其餘方法,請查閱文檔Api

vm對象的生命週期

一個對象的生成和銷燬都是有生命週期的，這個週期中有不少事件點，供咱們插入邏輯代碼；

生命週期事件，怎麼插入事件回調呢？

var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vm instance
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
直接把事件名當作一個屬性，而後加匿名回調函數便可。

vue生命週期圖示中英文版Vue實例生命週期鉤子 - 流風，飄然的風 - 博客園
https://www.cnblogs.com/zdz8207/p/vue-lifecycle.html