This is the 8th day of my participation in the More text Challenge. For details, see more text Challenge

One, foreword

In the last part, through the breakpoint debugging of Vue Demo, the process of data hijacking and data agent of the current version was simply sorted out

At the same time, compared with the functions provided by VUe2.x, the problems and shortcomings of the current version of data observation are analyzed

Here, a deep observation of the array

Second, the idea of array deep hijacking

1. Problem analysis

let vm = new Vue({
  el: '#app'.data() {
    return { 
      arr: [[1.2.3].// An array within an array is not deeply observed
        [4.5.6]，
        [7.8.9],]}}}) vm.arr[0].push(0)	// Array of arrays. Push
Copy the code

In the current version of the code, when the data type is encountered, the prototype method of the current array will be overridden, realizing the data hijacking of the array

However, there is currently no recursive manipulation of the data;

So, arrays nested within arrays, can’t be deeply hijacked;

2. Solutions

The data hijacking operation of array is processed recursively to realize the data hijacking ability of nested array

3. Performance issues

In vue 2.x, due to the need to recursively override the prototype method of the array,

Therefore, when the array hierarchy is too deep, it is easy to cause performance problems; (Need to override chains of properties, methods, and arrays)

Three, the implementation of array deep hijacking

1. Code implementation

Through the above analysis, to realize the deep hijacking of array, two cases need to be dealt with:

  • Nested arrays within arrays
  • Nested objects in arrays
// src/observe/index.js

class Observer {

  constructor(value) {
    if (isArray(value)) {
      value.__proto__ = arrayMethods;
      this.observeArray(value);	// Take a deep look at the array data types
    } else {
      this.walk(value); }}* 1) [[]] Array array * 2) [{}] Array array object *@param {*} data 
   */
  observeArray(data) {
    // Within the observe method, if it is an object type, the recursion continues with the new Observer
    data.forEach(item= > observe(item))  
  }
}
Copy the code

ObserveArray method: Call Observe for each item in the array

In this way, arrays of arrays [[]] and objects in arrays [{}], both of which enable deep observation of data

2. Problem analysis

Since only part of the array’s prototype methods are overridden, there is no data hijacking for each item

So, normal values in an array cannot be observed; (Overrides array methods only; value types are not handled in recursion)

Reference types in arrays that can be observed; Observe implements deep observation of object type.

Example analysis:

  • If vm.arr[0] is normal :(overrides array methods only, value types are not handled in recursion)

    Vm. arr[0] = 100 [0] = 100 [0] = 100

  • If vm.arr[0] is an object :(observe implements deep observation of object type)

    Vm. arr[0]. A = 1 Modifying object properties triggers view updates

Four, the end

In this paper, the deep observation implementation of array is introduced. The core points are as follows:

In the previous processing of the array type, only part of the prototype method was overwritten on the current array, that is, only the single-layer data hijacking ability of the array was realized, and the recursive observation operation observed on the array was continued. Note: The observe method does not operate on non-objects, so value types in arrays are not hijackedCopy the code

At present, the remaining problems of data observation are:

  • Implement the observation of new objects in the object (deep)
  • Implement the observation of new attributes in the object
  • Implement observations of new objects in arrays (deep) – prototype method override

Next, deep observation of new objects in objects