一 - 如何證明 Vue 中有數據代理：
vue數據代理:
-
data對象的所有屬性的操作(讀/寫)由vm對象來代理操作
-
好處: 通過vm對象就可以方便的操作data中的數據
//現在讓我們來寫一個小例子來證明Vue有數據代理的存在
<head>
<meta charset="UTF-8">
<title>02_數據代理</title>
<!-- 這個需要小夥伴們自己去下文件來引入喲 -->
<script src="./001js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
msg: '哈哈,好開心哦'
}
})
// 如果我們想要訪問 msg 的值
// 直接這樣寫會報錯：
console.log(vm.data.msg) //會報錯 Uncaught TypeError: Cannot read property 'msg' of undefined
// 所以我們打印看看實例對象vm 裏面有什麼呢?
console.log(vm);// Vue {...}
// 打印結果發現：
// vm中只有：_data, $data 這兩種，沒有 data屬性
// 只能通過這兩個屬性_data, $data來訪問 msg
console.log(vm._data.msg) //哈哈,好開心哦
console.log(vm.$data.msg) //哈哈,好開心哦
// 但是Vue爲了方便我們，說你不用這麼幹，你可以直接點.msg就能訪問到了：
console.log(vm.msg) //哈哈,好開心哦
// 此事證明了：vue中有數據代理,
//說明了：vm 代理了data,代理者vm,被代理者是data
</script>
//下面這張是對應的圖解：
