Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
Vue中数据代理的好处:
更加方便的操作data中的数据
基本原理:
通过Object.defineProperty( )把对象中所有的属性添加到vm上,
为每一个添加到vm上的属性,都指定一个getter/setter,
在getter/setter内部去操作(读/写)data中对应的属性。
![](https://img-blog.csdnimg.cn/img_convert/030f28742884e49f1911833fc10738f4.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Vue中的数据代理</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>学校名称 {{name}}</h1>
<h1>学校地址 {{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false
const vm=new Vue({
el:'#root',
data:{
name:'1111',
address:'beijing'
}
})
</script>
</body>
</html>