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. 连接本地websocket服务延迟的问题

    今天用C#编写了一个Chrome Remote Debugger的客户端程序,发现使用rest和websocket程序时第一次连接的时候特别慢,大概每次都要消耗一秒左右,而用chrome直接连接却没有 ...

  2. erlang资料

    http://www.cnblogs.com/--00/tag/Erlang/ http://blog.csdn.net/turingbooks/article/details/3247749 htt ...

  3. Latex Error cannot determine the size of graphic 报错的解决的方法

    Latex Error cannot determine the size of graphic 报错的解决的方法 插入jpg文件老是会报错... 追究了半天,原来是编译的命令又问题,不应该使用 la ...

  4. Eclipse配置mybatis-generator插件的2种方法

    原文:https://blog.csdn.net/u012825737/article/details/79117540 最近在做一个Mybatis的项目,学习到了一个插件mybatis-genera ...

  5. objective-c block 详解 转

    Block   Apple 在C, Objective-C, C++加上Block這個延申用法.目前只有Mac 10.6 和iOS 4有支援.Block是由一堆可執行的程式組成,也可以稱做沒有名字的F ...

  6. 什么是软件project？

    Normal 0 7.8 pt 0 2 false false false MicrosoftInternetExplorer4 /* Style Definitions */ table.MsoNo ...

  7. [Android UI] Activity Maintheme (Android 解决程序启动时的黑屏问题)

    <style name="MainTheme" parent="@android:style/Theme"> <item name=" ...

  8. Latex：表格制作全攻略

    给出一个制作复杂表格的例子,制作表格主要用到multicolumn,multirow和cline,其中,要使用multirow,必须usepackage{multirow} 如果要制作出如下图所示的表 ...

  9. coursera课程Text Retrieval and Search Engines之Week 1 Overview

    Week 1 OverviewHelp Center Week 1 On this page: Instructional Activities Time Goals and Objectives K ...

  10. java静态代码分析工具infer

    infer是一个静态代码分析工具,探测bugs. 主要支持Java.C/C++ 安装:brew install infer 在线展示:https://codeboard.io/projects/115 ...