Vue基礎入門到項目實戰教程(3) —— Vue實例中的數據對象

1、數據對象

當一個Vue實例被創建時，它將 data 對象中的所有屬性加入到Vue的響應式系統中。當這個屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。

代碼示例：

// 聲明數據對象
var data = { 
    msg: "hello" 
}

// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
  data: data
})

上面代碼中，可以將我們聲明的對象賦值到Vue實例中，使用 vm.msg == data.msg 比較時，結果為true。

當我們直接修改Vue實例中data屬性的值，結果將會影響到原始數據對象，代碼示例：

// 設置Vue實例中的屬性會影響到原始數據
vm.msg = "hai"
data.msg // => hai

// ……反之亦然
data.msg = "hello world"
vm.msg // => hello world

只有當Vue實例被創建時就已經存在於data中的屬性修改后才是響應式的，如果我們直接操作一個沒有在Vue實例中定義的屬性，或者是我們直接用賦值的形式為實例添加一個屬性，例如：

var vm = new Vue({
	el: '#app',
	data: {
		msg: 'hello'
	}
})
			
vm.val = 'world';

上面代碼中的，對 val 屬性做修改不會觸發任何視圖的更新，如果Vue實例中沒有提前聲明 val 屬性，直接在模板中使用該屬性，也會報錯：

<div id="app" v-cloak>
	{{ msg }} , {{val}}
</div>
<script src="js/vue.min.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: 'hello'
		}
	})
			
	vm.val = 'world';
</script>

報錯信息：

我們在設計數據模型時，一般會提前聲明好頁面中所需要渲染的屬性，並且為屬性賦初始化值。例如，我們要展示一些關於學生的信息，在獲取屬性的值之前，就要提前先為屬性賦初始化值，示例代碼：

var vm = new Vue({
	el: '#app',
	data: {
		name: '',
		age: 0,
		sex: '',
		hobby: []
	}
})

2、Object.freeze()方法

如果不需要對實例中的屬性做修改，也允許在頁面中使用屬性綁定的方式修改數據的話，我們可以使用 Object.freeze() 方式實現阻止修改現有的屬性，即Vue的響應系統無法再追蹤變化。

示例代碼：

var obj = {
	msg: 'hello'
}
			
//阻止修改數據
Object.freeze(obj);
			
var vm = new Vue({
	el: '#app',
	data: obj
})
			
//此時不允許修改Vue實例中的屬性
vm.msg = 'hello world';

運行上面的代碼，在瀏覽器的控制台中會報錯：

$ 符號的使用

為了區分Vue實例的屬性和方法，還可以在Vue實例是屬性和方法前使用 $ 符號，以便與用戶定義的屬性區分開。例如：

var data = {
	msg: 'hello'
}
var vm = new Vue({
  el: '#app',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('app') // => true

// $watch 是一個實例方法
vm.$watch('msg', function (newValue, oldValue) {
  // 這個回調將在 `vm.a` 改變后調用
})