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 数组 新增元素 响应式原理 7种方法的更多相关文章

  1. 《Vue 进阶系列之响应式原理及实现》

    https://www.bilibili.com/video/av51444410/?p=5 https://github.com/amandakelake/blog/issues/63 https: ...

  2. vue学习之深入响应式原理

    vue的响应式原理 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全 ...

  3. vue进阶用法-深入响应式原理

    异步更新队列 当vue异步执行更新DOM时,只要观察到数据变化,vue经开启一个队列,并缓冲在同一时间循环中发生的所有数据改变.如果同一个watch被多次触发,只会一次推入到队列中.然后在下一个事件循 ...

  4. Vue响应式原理及总结

    Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...

  5. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  6. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  7. 详解Vue响应式原理

    摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

  8. 浅析Vue响应式原理（三）

    Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...

  9. 手摸手带你理解Vue响应式原理

    前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它 ...

随机推荐

  1. Linux下生成随机密码（转）

    1.使用SHA算法来加密日期,并输出结果的前32个字符: date +%s |sha256sum |base64 |head -c 32 ;echo 生成结果如下: ZTNiMGM0NDI5OGZjM ...

  2. Effective OC : 1-5

    1,了解Objective-C语言的起源: OC为C语言的超集,为C加入了面向对象的特性. 要理解C中的指针和内存模型. 2.在类文件里尽量少引入其它头文件: 引入过多头文件.将借口暴露,添加耦合度. ...

  3. Linux下分割、合并文件——dd和cat

    功能说明:读取,转换并输出数据. 语 法:dd [bs=<字节数>][cbs=<字节数>][conv=<关键字>][count=<区块数>][ibs=& ...

  4. linux内核源码之基础准备篇

    http://blog.csdn.net/eastmoon502136/article/details/8711104

  5. 报错：无法从int?转换为int

    □ 背景分析 在控制器方法中的一个参数允许为null值:public ActionResult GetByCategory(int? categoryId = null) 当把这里的categoryI ...

  6. static关键字与方法区和类加载

    1.static的作用 答:将成员变量或方法存储进方法区.因为方法区能保证数据只存在一份,只会加载一次(类加载器加载类的时候才加载一次) 注:static Object obj = new Objec ...

  7. WebLogic Server 12c相对JBoss EAP 6的优势

    原文来自:https://blogs.oracle.com/middlewareplace/entry/why_should_you_choose_oracle 1.多数据中心部署和集群 WebLog ...

  8. Android平台上优秀的开源项目

    软件名:gaeproxy 软件作用:Android手机配置GoAgent. 项目地址:https://github.com/madeye/gaeproxy.git 软件名:ProxyDroid 软件作 ...

  9. 经典数独游戏+数独求解器—纯C语言实现

    "心常乐数独小游戏"(下面简称"本软件")是一款windows平台下的数独游戏软件. 本软件是开源.免费软件. 本软件使用纯C语言编写,MinGW编译,NSIS ...

  10. Protobuf 语法指南

    英文: Proto Buffers Language Guide 本指南描述了怎样使用protocol buffer 语法来构造你的protocol buffer数据,包括.proto文件语法以及怎样 ...