Vue2数据代理

【目标】实现data的代理可以直接通过vm实例获取data中定义的数据

【思考】在 vue 中的数据是存放在 data 中为什么可以通过 vm.XXX 直接访问数据呢？

<style>
  //在index.js中
  function Vue(options){
  const vm = this
  this.$options = options

  // options.data可能是对象也可能是函数
  vm._data = typeof(options.data) === 'function' ? options.data() : options.data

  _proxy.call(vm,vm._data)
}

// 定义代理
// 将vue实例上的操作,代理到vue.data上
function _proxy(data){
  const that = this
  Object.keys(data).forEach(key=>{
    Object.defineProperty(this,key,{
      get(){
        return this._data[key]
      },
      set(val){
        this._data[key] = val
      }
    })
  })
}
export default Vue;
</style>

  //在index.html中
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      name:'haonan',
      data:{
        a:{
          b:{
            c:'hello'
          }
        },
        arr:[1,2,3,4,5,6]
      }
    })
  </script>