vue 数组新增元素响应式原理

Posted 2021-01-21 mengfangui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 数组新增元素响应式原理相关的知识，希望对你有一定的参考价值。

1、问题

思考一个问题，以下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue 数组 响应式原理</title>
    </head>
    <body>
        <div id="app">
            <div v-for="item in list">
                {{ item }}
            </div>
        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: ‘#app‘,
                data: {
                    list: [1, 2, 3]
                }
            })
        </script>

    </body>
</html>

当我们在控制台输入：app.list[0] = 100时，vue会监测到变化吗？

技术分享图片

app.push(100)呢？

技术分享图片

引申出的问题就是：

vue对数组新增的元素，包括push、unshift和splice（插入）的元素是怎么做到响应式的呢？

2、Vue对新增的数组元素响应式原理

（1）核心代码（observer/array.js）

/*
 * not type checking this file because flow doesn‘t play well with
 * dynamically accessing methods on Array prototype
 */

import { def } from ‘../util/index‘

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

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

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case ‘push‘:
      case ‘unshift‘:
        inserted = args
        break
      case ‘splice‘:
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})

在这个函数中使用到了def函数，def函数的定义是（util/lang.js）：

export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

即对元素的属性重新定义，尤其是value的获取。

回到observer/array.js，除了正常返回push、unshift和splice（插入）函数执行的result结果外，还通知了变化！ob.dep.notify！所以对新增的数组元素实现了响应式的变化。

留一个问题：

switch (method) {
      case ‘push‘:
      case ‘unshift‘:
        inserted = args
        break
      case ‘splice‘:
        inserted = args.slice(2)
        break
    }

为什么push、unshift和splice处理的参数不一样？

查一下splice的参数有哪些吧。

以上是关于vue 数组新增元素响应式原理的主要内容，如果未能解决你的问题，请参考以下文章

Proxy（vue响应式原理：数据侦测--数据劫持和数据代理）

vue数组响应式原理

Vue——学生信息管理系统

敲黑板，划重点！！！Vue3.0响应式实现原理 —— proxy()

vue 数组 新增元素 响应式原理

vue 数组新增元素响应式原理