// 假設(shè)這個(gè)是我們創(chuàng)建的 reactive 數(shù)據(jù)
const data = {
  name: "張三",
  age: 21
};
// 創(chuàng)建 proxy 代理 data 對(duì)象，添加到 vue 的實(shí)例對(duì)象中
// 語法：const vm = new Proxy(要代理的數(shù)據(jù), 配置對(duì)象)
const vm = new Proxy(data, {
  // 當(dāng)有人讀取 vm 的某個(gè)屬性時(shí)調(diào)用
  get(target, propName) {
	// target 就是被代理的這個(gè)對(duì)象，propName 就是當(dāng)前操作的屬性
    console.log(`有人讀取了vm身上的${propName}屬性`);
    return target[propName]; // 返回代理對(duì)象中的這個(gè)屬性
  },
  // 當(dāng)有人修改 vm 的某個(gè)屬性時(shí)，或給 vm 添加某個(gè)屬性時(shí)調(diào)用
  set(target, propName, value) {
	// value 就是修改的值
    console.log(`有人修改了vm身上的${propName}屬性，我要去更新頁面了！`);
    return (target[index] = value); // 修改或添加這個(gè)屬性
  },
  // 當(dāng)有人刪除 vm 的某個(gè)屬性時(shí)調(diào)用
  deleteProperty(target, propName) {
    console.log(`有人刪除了vm身上的${propName}屬性，我要去更新頁面了！`);
    return delete target[propName]; // 刪除代理對(duì)象中的這個(gè)屬性
  },
});

// 假設(shè)這個(gè)是我們創(chuàng)建的 reactive 數(shù)據(jù)
const arr = ["張三", "李四", "王五"];
// 創(chuàng)建 proxy 代理 arr 數(shù)組，添加到 vue 的實(shí)例對(duì)象中
// 語法：const app = new Proxy(要代理的數(shù)據(jù), 配置對(duì)象)
const app = new Proxy(arr, {
  // 當(dāng)有人讀取 app 的某個(gè)值時(shí)調(diào)用
  get(target, index) {
    // target 就是被代理的這個(gè)數(shù)組，index 就是當(dāng)前操作的屬性或下標(biāo)
    console.log(`有人讀取了app身上下標(biāo)${index}的值`);
    return target[index]; // 返回代理數(shù)組中的這個(gè)值
  },
  // 當(dāng)有人修改 app 的某個(gè)值時(shí)，或給 app 添加一個(gè)值時(shí)調(diào)用
  set(target, index, value) {
    // value 就是修改的值
    console.log(`有人修改了app身上下標(biāo)${index}的值，我要去更新頁面了！`);
    return (target[index] = value); // 修改或添加代理數(shù)組中的這個(gè)值
  },
  // 當(dāng)有人刪除 app 的某個(gè)值時(shí)調(diào)用
  deleteProperty(target, index) {
    console.log(`有人刪除了app身上下標(biāo)${index}的值，我要去更新頁面了！`);
    return delete target[index]; // 刪除代理數(shù)組中的這個(gè)值
  },
});

const data = {
  name: "張三",
  age: 20,
  arr: ["a", "b", "c"],
  obj: { q: 1, w: 2 },
};
const app = new Proxy(data, {
  get(target, propName) {
    console.log(`有人讀取了app身上的${propName}屬性`);
    return target[propName];
  },
  set(target, propName, value) {
    console.log(`有人修改了app身上的${propName}屬性，我要去更新頁面了！`);
    return (target[propName] = value);
  },
  deleteProperty(target, propName) {
    console.log(`有人刪除了app身上的${propName}屬性，我要去更新頁面了！`);
    return delete target[propName];
  },
});