Vue数据代理 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      let number = 18
      let person = {
        name: '张三',
        sex: '男',
      }

      Object.defineProperty(person, 'age', {
        // value: 18,
        // enumerable: true, //控制数据是否可以枚举 默认false
        // writable: true, //控制属性可以修改
        // configurable: true, //控制属性可以删除

        //当有人读取person的age属性时候，get函数就会被调用，且返回值就是age的值
        get() {
          console.log('有人读取age属性')
          return number
        },

        set(value) {
          console.log('有人修改age属性, 且值是', value)
          number = value
        },
      })
      //   console.log(Object.keys(person))
      console.log(person)
      for (let key in person) {
        console.log('@', person[key])
      }
      const vm = new Vue({
        el: '#root',
        data() {
          return {
            name: 'msb',
            address: '北京',
          }
        },
      })
    </script>
  </body>
</html>
posted @ 2022-04-29 18:24  wjxuriel  阅读(17)  评论(0)    收藏  举报