为什么在vue2中改变数据视图不会更新,带你阅读源码

1. 监听数组变化

• 其实 Vue 监听数组变化的原理非常简单, 就是将数组的主要方法包裹了一遍
• 只要用户调用以下方法, 就会通知 Watcher 自动更新视图:
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

演示

工程源码: src/core/observer/array.js

// 获取数组的原型 Array.prototype, 为了方便拿到数组原有的方法
const arrayProto = Array.prototype

// 创建一个空对象 arrayMethods, 并将 arrayMethods 的原型指向 Array.prototype
export const arrayMethods = Object.create(arrayProto)

// 列出需要重写的方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

// 遍历列出的方法
methodsToPatch.forEach(function (method) {
   
  // 找到原来的函数体
  const original = arrayProto[method]
  // def 就是 defineProperty() 可以参见 util/lang.js
  def(arrayMethods, method, function 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23