一文詳解Vue響應式數(shù)據(jù)的原理

更新時間：2023年08月13日 10:12:14 作者：小吳吳吳呀

在vue2的響應式中,存在著添加屬性、刪除屬性、以及通過下標修改數(shù)組,但頁面不會自動更新的問題,而這些問題在vue3中都得以解決,本文就給大家詳細的介紹一下Vue響應式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來看看吧

Proxy 代理的使用【代理對象】：

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

注：proxy 不僅能檢測到讀取屬性和修改屬性，還能檢測到添加屬性和刪除屬性。所以在 vue3 中添加或刪除一個對象中的屬性時，頁面也會自動更新。

注：讀取時觸發(fā) get 函數(shù)、修改或添加時觸發(fā) set 函數(shù)、刪除時觸發(fā) deleteProperty 函數(shù)。

Proxy 代理的使用【代理數(shù)組】：

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

注：proxy 支持通過下標操作數(shù)組，例如查看數(shù)據(jù)、修改數(shù)據(jù)、增加數(shù)據(jù)。所以在 vue3 中通過下標修改數(shù)組時，頁面也會自動更新。

注：在使用 push 等方法的時候，length 屬性也會發(fā)生變化。所以 vue3 分別判斷了 push、pop、unshift、shift 等方法，用于區(qū)分攔截的各種情況。

Proxy 代理的使用【深層數(shù)據(jù)的問題】

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];
  },
});

注：proxy 代理深層數(shù)據(jù)的時候，只會觸發(fā) get 函數(shù)，并不會觸發(fā) set 函數(shù)