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>