06数据代理_

<template>
    <div>
      <h1>回顾Object.defineproperty方法</h1>
    </div>
    <div id="root">
    </div>
    
    <hr/>
  <div>
    <h4>何为数据代理</h4>
  </div>
  <p>数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）</p>
  
  <div>
    <strong>
      Vue中的数据代理
    </strong>
    <hr/>
    <h1>我的名字： {{data.name}}</h1>
    <h1>我的地址： {{data.address}}</h1>
    <h2>vm._data.name = data</h2>
    vm.name -> setter -> data
    <br/>
    vm._data 和 data 指向堆内存中的同一个地址， 这一步只是对数据的浅拷贝。
    <hr/> 
    如果vue没有做数据代理 {{'name'}} 就需要 {{'_data.name'}} 这样写
  </div>
  总结：<br/>
      1.vue 中的数据代理：<br/>
            通过vm对象来代理data对象中属性的操作(读/写)<br/>
      2.vue 中数据代理的好处：<br/>
            更加方便的操作data中的数据<br/>
      3.基本原理：<br/>
            通过Object.defineProperty()把data对象中所有属性添加到vm上<br/>
            为每一个添加到vm上的属性,都指定一个getter/setter。<br/>
            在getter/setter内部去操作(读/写)data中对应的属性<br/>
    
    
  </template>
  <script>
  let number = 18
  let person = {
    name : '张三',
    sex: '男',
    // age:18
  }
  //第一个参数给那个对象添加属性，第二个参数添加的属性叫什么名字,第三个参数配置项目{}
  Object.defineProperty(person,'age',{     // 可以对追加的属性的进行高级限制。
  // value:18,
  // enumerable:true, // 控制属性是否可以枚举，默认值是false
  // writable:true,     // 控制属性是否可以被修改， 默认值是false
  // configurable:true, // 控制属性是否可以被删除， 默认值是false
  
  // 当有人读取person的age属性时， get函数(getter)就会被调用， 且返回值就是age的值。
  get:function(){
    console.log('有人读取age属性了')
  return number
  },
  // 当有人读取person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
  set(value) {
  console.log('有人修改了age属性,且值是', value)
  }
  })
  // 只能遍历数组的key
  console.log(Object.keys(person))
  
  // for (let key in person) {
  //   console.log('@@@',person[key])
  // }
  console.log(person)
  
  export default {
  //data的第二种写法:函数式
    data() { 
      console.log('@@@',this);
      return { 
        data: {
        name: 'qinling',
        address: '辽宁省大连市高新园区'
      }
        
        
      }
    }
    
  }
  </script>


  <template>
    <div>
      <h1>回顾Object.defineproperty方法</h1>
    </div>
    <div id="root">
    </div>
    
    <hr/>
  
    
    
  </template>
  <script>
  let number = 18
  let person = {
    name : '张三',
    sex: '男',
    // age:18
  }
  //第一个参数给那个对象添加属性，第二个参数添加的属性叫什么名字,第三个参数配置项目{}
  Object.defineProperty(person,'age',{     // 可以对追加的属性的进行高级限制。
  // value:18,
  // enumerable:true, // 控制属性是否可以枚举，默认值是false
  // writable:true,     // 控制属性是否可以被修改， 默认值是false
  // configurable:true, // 控制属性是否可以被删除， 默认值是false
  
  // 当有人读取person的age属性时， get函数(getter)就会被调用， 且返回值就是age的值。
  get:function(){
    console.log('有人读取age属性了')
  return number
  },
  // 当有人读取person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
  set(value) {
  console.log('有人修改了age属性,且值是', value)
  }
  })
  // 只能遍历数组的key
  console.log(Object.keys(person))
  
  // for (let key in person) {
  //   console.log('@@@',person[key])
  // }
  console.log(person)
  
  export default {
  //data的第二种写法:函数式
    data() { 
      console.log('@@@',this);
      return { 
        
      }
    }
    
  }
  </script>