new Proxy(data,{
  //攔截讀取屬性值
  get(target, prop){
    return Reflect.get(target, prop)
  },
  //攔截設置屬性值或添加新屬性
  set(target, prop, value){
    return Reflect.set(target, prop, value)
  },
  //攔截刪除屬性
  deleteProperty(target, prop){
    return Reflect.deleteProperty(target, prop)
  }
})

new Vue({
  el: "#app",
  router,
  store,
  render: (h) => h(App),
});

// src/index.js
import { initMixin } from "./init.js";
// Vue就是一個構(gòu)造函數(shù) 通過new關鍵字進行實例化
function Vue(options) {
  // 這里開始進行Vue初始化工作
  this._init(options);
}
// _init方法是掛載在Vue原型的方法 通過引入文件的方式進行原型掛載需要傳入Vue
// 此做法有利于代碼分割
initMixin(Vue);
export default Vue;

// src/init.js
import { initState } from "./state";
export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    const vm = this;
    // 這里的this代表調(diào)用_init方法的對象(實例對象)
    //  this.$options就是用戶new Vue的時候傳入的屬性
    vm.$options = options;
    // 初始化狀態(tài)
    initState(vm);
  };
}

// src/state.js
import { observe } from "./observer/index.js";
export function initState(vm) {
  // 獲取傳入的數(shù)據(jù)對象
  const opts = vm.$options;
  if (opts.props) {
    initProps(vm);
  }
  if (opts.methods) {
    initMethod(vm);
  }
  if (opts.data) {
    // 初始化data
    initData(vm);
  }
  if (opts.computed) {
    initComputed(vm);
  }
  if (opts.watch) {
    initWatch(vm);
  }
}
// 初始化data數(shù)據(jù)
function initData(vm) {
  let data = vm.$options.data;
  //   實例的_data屬性就是傳入的data
  // vue組件data推薦使用函數(shù) 防止數(shù)據(jù)在組件之間共享
  data = vm._data = typeof data === "function" ? data.call(vm) : data || {};
  // 把data數(shù)據(jù)代理到vm 也就是Vue實例上面 我們可以使用this.a來訪問this._data.a
  for (let key in data) {
    proxy(vm, `_data`, key);
  }
  // 對數(shù)據(jù)進行觀測 --響應式數(shù)據(jù)核心
  observe(data);
}
// 數(shù)據(jù)代理
function proxy(object, sourceKey, key) {
  Object.defineProperty(object, key, {
    get() {
      return object[sourceKey][key];
    },
    set(newValue) {
      object[sourceKey][key] = newValue;
    },
  });
}

// src/obserber/index.js
class Observer {
  // 觀測值
  constructor(value) {
    this.walk(value);
  }
  walk(data) {
    // 對象上的所有屬性依次進行觀測
    let keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
      let key = keys[i];
      let value = data[key];
      defineReactive(data, key, value);
    }
  }
}
// Object.defineProperty數(shù)據(jù)劫持核心 兼容性在ie9以及以上
function defineReactive(data, key, value) {
  observe(value); // 遞歸關鍵
  // --如果value還是一個對象會繼續(xù)走一遍odefineReactive 層層遍歷一直到value不是對象才停止
  //   思考？如果Vue數(shù)據(jù)嵌套層級過深 >>性能會受影響
  Object.defineProperty(data, key, {
    get() {
      console.log("獲取值");
      return value;
    },
    set(newValue) {
      if (newValue === value) return;
      console.log("設置值");
      value = newValue;
    },
  });
}
export function observe(value) {
  // 如果傳過來的是對象或者數(shù)組 進行屬性劫持
  if (
    Object.prototype.toString.call(value) === "[object Object]" ||
    Array.isArray(value)
  ) {
    return new Observer(value);
  }
}

// src/obserber/index.js
import { arrayMethods } from "./array";
class Observer {
  constructor(value) {
    if (Array.isArray(value)) {
      // 這里對數(shù)組做了額外判斷
      // 通過重寫數(shù)組原型方法來對數(shù)組的七種方法進行攔截
      value.__proto__ = arrayMethods;
      // 如果數(shù)組里面還包含數(shù)組 需要遞歸判斷
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  }
  observeArray(items) {
    for (let i = 0; i < items.length; i++) {
      observe(items[i]);
    }
  }
}

// src/obserber/index.js
class Observer {
  // 觀測值
  constructor(value) {
    Object.defineProperty(value, "__ob__", {
      //  值指代的就是Observer的實例
      value: this,
      //  不可枚舉
      enumerable: false,
      writable: true,
      configurable: true,
    });
  }
}

// src/obserber/array.js
// 先保留數(shù)組原型
const arrayProto = Array.prototype;
// 然后將arrayMethods繼承自數(shù)組原型
// 這里是面向切片編程思想（AOP）--不破壞封裝的前提下，動態(tài)的擴展功能
export const arrayMethods = Object.create(arrayProto);
let methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "reverse",
  "sort",
];
methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    //   這里保留原型方法的執(zhí)行結(jié)果
    const result = arrayProto[method].apply(this, args);
    // 這句話是關鍵
    // this代表的就是數(shù)據(jù)本身 比如數(shù)據(jù)是{a:[1,2,3]} 那么我們使用a.push(4)  this就是a  ob就是a.__ob__ 這個屬性就是上段代碼增加的 代表的是該數(shù)據(jù)已經(jīng)被響應式觀察過了指向Observer實例
    const ob = this.__ob__;
    // 這里的標志就是代表數(shù)組有新增操作
    let inserted;
    switch (method) {
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
      default:
        break;
    }
    // 如果有新增的元素 inserted是一個數(shù)組 調(diào)用Observer實例的observeArray對數(shù)組每一項進行觀測
    if (inserted) ob.observeArray(inserted);
    // 之后咱們還可以在這里檢測到數(shù)組改變了之后從而觸發(fā)視圖更新的操作--后續(xù)源碼會揭曉
    return result;
  };
});