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. angularjs中如何在异步请求执行完以后再执行其他函数？

    angularjs中如何在异步请求执行完以后再执行其他函数? 之前脑袋回路就是从上到下的执行js,直到有一次我的页面上已经显示了空才走到angularjs里的$http的成功回调函数里,然后才开始正视 ...

  2. 74HC245 74HCT245 74LV245 74LVC245 74LVC4245A 74LVC8T245 74LVC16T245 74ALVC164245

    74HC245/74HCT245 The 74HC245; 74HCT245 is a high-speed Si-gate CMOS device and is pin compatible wit ...

  3. 在一台服务器上搭建多个项目的SVN

    需求:一台机子,多个项目,项目之间用户独立不可以相互访问文件 思路:在机子上设置多个代码仓库,用不同的端口号加一区分 实现: 首先安装SVN,我这里使用的是TortoiseSVN 首先创建多个SVN代 ...

  4. java基础学习总结——方法的重载(overload)

    一.方法的重载 方法名一样,但参数不一样,这就是重载(overload). 所谓的参数不一样,主要有两点:第一是参数的个数不一样,第二是参数的类型不一样.只要这两方面有其中的一方面不一样就可以构成方法 ...

  5. 使用EF Model First创建edmx模型,数据库有数据的情况下,如何同时更新模型和数据库

    使用"EF Model First",我们可以很直观地在edmx文件中创建数据模型,并根据模型生成数据库,整个过程快速而高效.可当数据库中有了一定的数据量,同时,可能需要对模型中字 ...

  6. 序列化人人网框架下的DAO?也就是在Spring下序列化DAO的问题(spring+quartz集群下)

    人人网框架地址:http://code.google.com/p/paoding-rose/ 问题发生: 用Quartz作集群时用JobDataMap传递DAO,提示DAO未序列化,可框架的DAO为接 ...

  7. MiniGUI ial 移植指南

    MiniGUI ial 移植指南 2.1 ial的定义 ial是一个通用的抽象输入接口,可以输入统一的数据的结构,也就是说在MiniGUI的核心代码里输入的数据的格式是固定的,不管输入设备是鼠标 还是 ...

  8. 【BZOJ】【2741】【FOTILE模拟赛】L

    可持久化Trie+分块 神题……Orz zyf & lyd 首先我们先将整个序列搞个前缀异或和,那么某一段的异或和,就变成了两个数的异或和,所以我们就将询问[某个区间中最大的区间异或和]改变成 ...

  9. Windows 7系统垃圾清理自写程序

    系统清理.bat @echo off color 0a title windows7系统垃圾清理--- echo ★☆ ★☆ ★☆ ★☆ ★☆★☆★☆ ★☆ ★☆ ★☆ ★☆★ echo ★☆ ★☆ ...

  10. FLume监控文件夹，将数据发送给Kafka以及HDFS的配置文件详解

    详细配置文件flume-conf.properties如下: ############################################ # producer config ###### ...