Vue2, vue3 monitor changes in objects

1 Responsive principle

Vue responsiveness is also called data two-way binding

MVVM model (Model-Viem-ViewModel)

• DOM listeners: Realize the binding between the page and the data, when the page manipulates the data, the DOM and Model will change accordingly
• Data Bindings: realizes the binding of data and pages, and automatically renders pages when data changes

2 vue2 data monitoring

2.1 Implementation principle

Vue implements data responsiveness by using object.defineProperty() to detect data changes for data hijacking, and publish-subscribe model for dependency collection and view update.

The object.defineProperty() method directly defines a new property on an object, or modifies an existing property of an object, and returns this object.

2.2 object.defineProperty() monitors data

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


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

  Object.defineProperty(obj, key, {
    get: function() {
      console.log(`监听到obj对象的${key}属性被访问了`)
      return value
    },
    set: function(newValue) {
      console.log(`监听到obj对象的${key}属性被设置值`)
      value = newValue
    }
  })
})

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

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

obj.height = 1.88

2.3 object.defineProperty() defects

1. defineProperty can only monitor a certain property , and cannot monitor all objects. To monitor an object, you need to use foreach, closure and other technologies

2.  defineproperty cannot monitor the operation of adding and deleting properties of objects

Developers need to actively call the corresponding method to update: Vue.set(), Vue.delete

2. defineproperty cannot monitor the addition and deletion of arrays

When the array item is set directly using the index index, it will not be detected by vue

Vue2.0 uses the array rewriting method to realize the response of the array, and the 7 methods are respectively

• push();

• pop();

• shift();

• unshift();

• splice();

• sort();

• reverse()

3 vue3 data monitoring

3.1 Principle 

The Proxy  object is used to create a proxy of an object, so as to realize the interception and customization of basic operations. Subsequent operations are all direct operations on the Proxy, not the original object

const p = new Proxy(target, handler)

target The target object to use  Proxy the wrapper (can be any type of object, including native arrays, functions, or even another proxy).

handler An object that usually has functions as attributes, and the functions in each attribute define the  p behavior of the agent when performing various operations.

The method of the handler object [MDN] (13 traps)   

3.2 Code

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

const objProxy = new Proxy(obj, {
  // 获取值时的捕获器
  get: function (target, key) {
    console.log(`监听到对象的${key}属性被访问了`, target);
    return target[key];
  },

  // 设置值时的捕获器
  set: function (target, key, newValue) {
    target[key] = newValue;
    console.log(`监听到对象的${key}属性被设置值`, target);
  },
  // 监听in的捕获器
  has: function (target, key) {
    console.log(`监听到对象的${key}属性in操作`, target);
    return key in target;
  },
  // 监听delete的捕获器
  deleteProperty: function (target, key) {
    delete target[key];
    console.log(`监听到对象的${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);

 Results of the

 

3.3