Vue中对Array拓展的方法

Posted on In

原理

通过改写[].__proto__上的方法，实现对Array原生方法的拦截。

源码位置为 /core/instance/observer/array.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// cache the original Array.prototype
const originalPrototype = Array.prototype

// create an object from original Array.prototype
const arrayMethods = Object.create(originalPrototype)

const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
]

methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    // use original Array methods to get the result
    const result = originalPrototype[method].apply(this, args)

    // proxy here
    console.log(`catch ${method}`)

    return result
  }
})

const a = [1, 2, 3]
a.__proto__ = arrayMethods

a.push(1)
a.reverse()
a.pop()

console.log(a)