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. 重温PHP之快速排序

    基本原理:选出当前数组中任一元素(通常为第一个)作为标准,新建两个空数组分别置于当前数组前后,然后遍历当前数组,如果数组中元素值小于等于第一个元素值就放到前边空数组,否则放到后边空数组. //快速排序 ...

  2. Android项目文件夹结构分析

    项目结构例如以下图所看到的,使用不同sdk版本号建立的项目项目结构有所不同,整体同样,高版本号添加了一些包结构 1.src 和java项目一样src存放项目源码 2.gen 自己主动生成,当中R.ja ...

  3. C#Arcengine通过坐标点生成面(环形)

    来自:http://www.cnblogs.com/lee24789229/p/5481978.html 通过传入坐标点,返回几何图形,此代码部分可以生成环形面. 方法一 private IGeome ...

  4. Log4net 配置输出文本, 按年月日分文件夹 z

    在项目中新建 “log4net.config” 文件 <?xml version="1.0" encoding="utf-8" ?> <con ...

  5. LR杂记-nmon+analyser监控linux系统资源

    1.查看linux具体版本号信息 file /sbin/init 2.下载相应nmon版本号 http://pkgs.repoforge.org/nmon/ 3.安装 rpm -ivh nmon-14 ...

  6. SQL：（转）数据库中的锁机制(数据库中有哪些锁)

    数据库中的锁机制 锁是网络数据库中的一个非常重要的概念,它主要用于多用户环境下保证数据库完整性和一致性.各种大型数 据库所采用的锁的基本理论是一致的,但在具体实现上各有差别.目前,大多数数据库管理系统 ...

  7. 第二章 ActionScript 3.0学习之画星星（鼠标及键盘事件）

    今天觉得学到的比较有趣,所以记录之......~~~ 下面这段就是画出星星的代码:StarShape.as package { import flash.display.Shape; import f ...

  8. HDU1561:The more, The Better(树形DP+01背包)

    Problem Description ACboy很喜欢玩一种战略游戏,在一个地图上,有N座城堡,每座城堡都有一定的宝物,在每次游戏中ACboy允许攻克M个城堡并获得里面的宝物.但由于地理位置原因,有 ...

  9. 结合MapReduce和数据集Combining datasets with MapReduce

    While in the SQL-world is very easy combining two or more datasets - we just need to use the JOIN ke ...

  10. Maven中<dependencies>节点和<dependencyManagement>节点的区别

    dependencyManagement只是插件管理,并不是真正的插件依赖,所以里面包含的插件在没有子项目使用的时候,并不会真正下载 1 ．使用项目继承 利用项目继承可以将结构信息,部署信息,共同的依 ...