Vue 入門級學習筆記 實例

創建一個Vue實例

		var vm = new Vue({
			//選項對象
		});

一個Vue應用通過一個由new Vue創建的根Vue實例和可選的嵌套的,可複用的組件樹組成

所有的Vue組件都是Vue實例,並接受相同的選項對象(一些根實例特有的選項除外)

 

數據與方法

		var origin = {
			a: 1
		}
		var vm = new Vue({
			//選項對象
			data: origin
		});
		vm.a; //1
		vm.$data == origin; //true

可以直接在data中定義新對象,本例中引用對象只是爲了方便說明

可以直接通過vm.a的方式來訪問vm中data中的a屬性

這是因爲vue重寫了對應屬性的訪問描述符getter和setter等

只有當實例被創建時data中存在的屬性纔是響應式的(響應式的屬性值發生改變時,視圖將會產生響應,即匹配更新爲最新的值)

也就是說添加了新的屬性並不是響應式

解決方式:佔位屬性,使用value爲空值('',0,false,[],null等)

		var vm = new Vue({
			//選項對象
			data: {
				a:null,
				b:"",
				c:[]
			}
		});

這裏唯一例外的是使用Object.freeze()

(Object.freeze()會調用Object.preventExtensions(..)來禁止添加新屬性並把所有屬性標記爲configurable:false和writable:false)

這也意味着響應系統無法再最追蹤變化

 

除了數據屬性,Vue實例還暴露了一些有用的實例屬性和方法(比如data)

這些實例方法使用$前綴以區分用戶定義的屬性(data中的屬性)

		var origin = {
			a: 1
		}
		var vm = new Vue({
			//選項對象
			el: "#vm",
			data: origin
		});
		vm.$data == origin; //true
		vm.$el; //<div id="vm"></div> 
		vm.$watch("a", function(newValue, oldValue) {
			//在vm.a改變後調用
			console.log("vm.$watch調用結果:"+newValue, oldValue);
		});

實例生命週期鉤子

每個Vue實例在創建時都要經歷一系列的初始化過程(設置數據監聽,編譯模板,將實例掛載到DOM並在數據更新的時候更新DOM等)

這個過程中也會運行一些叫聲明週期鉤子的函數(如 created , mounted , updated , 和 destroyed 等)

生命週期鉤子的this上下文指向調用他的Vue實例

		var vm = new Vue({
			created: function() {
				console.log("created已被調用");
			}
		})

不要在選項屬性或回調上使用箭頭函數，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因爲箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的 Vue 實例