一 - 如何证明 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>
//下面这张是对应的图解: