1? 響應(yīng)式原理

vue響應(yīng)式也叫作數(shù)據(jù)雙向綁定

MVVM模型 （Model-Viem-ViewModel)

• DOM listeners:實現(xiàn)了頁面與數(shù)據(jù)的綁定，當(dāng)頁面操作數(shù)據(jù)的時候 DOM 和 Model 也會發(fā)生相應(yīng)的變化
• Data Bindings:??實現(xiàn)了數(shù)據(jù)與頁面的綁定，當(dāng)數(shù)據(jù)發(fā)生變化的時候會自動渲染頁面

2 vue2 數(shù)據(jù)監(jiān)聽

2.1? 實現(xiàn)原理

vue實現(xiàn)數(shù)據(jù)響應(yīng)式，是通過object.defineProperty()對數(shù)據(jù)劫持偵測數(shù)據(jù)變化，發(fā)布訂閱模式進行依賴收集與視圖更新。

object.defineProperty()方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象。

2.2??object.defineProperty()對數(shù)據(jù)的監(jiān)聽

const obj = {
  name: "one",
  age: 18
}


Object.keys(obj).forEach(key => {
  let value = obj[key]

  Object.defineProperty(obj, key, {
    get: function() {
      console.log(`監(jiān)聽到obj對象的${key}屬性被訪問了`)
      return value
    },
    set: function(newValue) {
      console.log(`監(jiān)聽到obj對象的${key}屬性被設(shè)置值`)
      value = newValue
    }
  })
})

obj.name = "two"
obj.age = 20

console.log(obj.name)   
console.log(obj.age)

obj.height = 1.88

2.3 object.defineProperty()缺陷

1.defineProperty只能監(jiān)聽某個屬性，不能對全對象監(jiān)聽 對一個對象的監(jiān)聽需使用foreach、閉包等技術(shù)

2.?defineproperty不能監(jiān)聽到對象的添加刪除屬性操作

需要開發(fā)者主動調(diào)用相應(yīng)的方法去更新 ：Vue.set(),Vue.delete

2.defineproperty不能監(jiān)聽數(shù)組的添加刪除操作

直接使用索引 index 設(shè)置數(shù)組項時，不會被vue檢測到

vue2.0使用數(shù)組重寫的方法實現(xiàn)了數(shù)組的響應(yīng)，7個方法分別為

• push();

• pop();

• shift();

• unshift();

• splice();

• sort();

• reverse()

3 vue3 數(shù)據(jù)監(jiān)聽

3.1 原理?

Proxy?對象用于創(chuàng)建一個對象的代理，從而實現(xiàn)基本操作的攔截和自定義。之后的操作都是直接對Proxy的操作，而不是原有的對象

const p = new Proxy(target, handler)

target?要使用?Proxy?包裝的目標(biāo)對象（可以是任何類型的對象，包括原生數(shù)組，函數(shù)，甚至另一個代理）。

handler?一個通常以函數(shù)作為屬性的對象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時代理?p?的行為。

handler對象的方法【MDN】（13個捕獲器 trap)? ?

3.2 代碼

const obj = {
  name: 'one',
  age: 18,
};

const objProxy = new Proxy(obj, {
  // 獲取值時的捕獲器
  get: function (target, key) {
    console.log(`監(jiān)聽到對象的${key}屬性被訪問了`, target);
    return target[key];
  },

  // 設(shè)置值時的捕獲器
  set: function (target, key, newValue) {
    target[key] = newValue;
    console.log(`監(jiān)聽到對象的${key}屬性被設(shè)置值`, target);
  },
  // 監(jiān)聽in的捕獲器
  has: function (target, key) {
    console.log(`監(jiān)聽到對象的${key}屬性in操作`, target);
    return key in target;
  },
  // 監(jiān)聽delete的捕獲器
  deleteProperty: function (target, key) {
    delete target[key];
    console.log(`監(jiān)聽到對象的${key}屬性delete操作`, target);
  },
});

console.log(objProxy.name);
console.log(objProxy.age);

objProxy.name = 'two';
objProxy.age = 20;

// in操作符
console.log('name' in objProxy);

// delete操作
delete objProxy.name;
console.log(obj.name);
console.log(obj.age);

?執(zhí)行結(jié)果

?文章來源地址http://www.zghlxwxcb.cn/news/detail-756673.html

3.3?

到了這里，關(guān)于Vue2 、vue3 監(jiān)聽對象的變化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！