05.Vue2.x 数据代理

文章目录

- Vue中的数据代理

Vue中的数据代理

!<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数据代理</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 关于Vue中的数据代理：1.什么是数据代理：(1)配置对象data中的数据，会被收集到vm._data中，然后通过Object.defineProperty让vm上拥有data中所有的属性(2)当访问vm的msg时，返回的是data当中同名属性的值(3)当修改vm的msg时，修改的是data当中同名属性的值2.为什么要数据代理：为了更加方便的读取和修改data中的数据，不做数据代理，就要：vm._data.xxx访问数据3.扩展思考? ---为什么要先在_data中，然后再代理出去呢？更高效的监视数据（直接收集到vm上会导致监视效率太低）--><div id="root"><h2>学校名字：{{name}}</h2><h2>学校地址：{{address}}</h2><h2>学科：{{subject}}</h2></div><script>const vm = new Vue({el: "#root",data: {name: "atguigu",address: "北京",subject: "前端",},});console.log(vm);console.log(vm.name);console.log(vm.address);console.log(vm.subject);</script></body>
</html>