vue 数组 指定位置添加数据_VUE 响应式原理源码：带你一步精通 VUE | 原力计划...

作者 | 爱编程的小和尚

责编 | 王晓曼

出品 | CSDN博客

学过 VUE 如果不了解响应式的原理，怎么能说自己熟练使用 VUE，要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE，这篇文章通过300多行代码，带你写一个简易版的 VUE，主要实现 VUE 数据响应式 (数据劫持结合发布者-订阅者)、数组的变异方法、编译指令，数据的双向绑定的功能。

本文需要有一定 VUE 基础，并不适合新手学习。

文章较长，且有些难度，建议大家，找一个安静的环境，并在看之前沐浴更衣，保持编程的神圣感。下面是实现的简易版VUE 的源码地址，一定要先下载下来！因为文章中的并非全部的代码。

Github源码地址：https://github.com/young-monk/myVUE.git

前言

在开始学习之前，我们先来了解一下什么是 MVVM ，什么是数据响应式。

我们都知道 VUE 是一个典型的 MVVM 思想，由数据驱动视图。

那么什么是 MVVM 思想呢？

MVVM是Model-View-ViewModel，是把一个系统分为了模型( model )、视图( view )和 view-model 三个部分。

VUE在 MVVM 思想下，view 和model 之间没有直接的联系，但是 view 和 view-model 、model和 view-model之间时交互的，当 view 视图进行 dom 操作等使数据发生变化时，可以通过 view-model 同步到 model 中，同样的 model 数据变化也会同步到 view 中。

那么实现数据响应式都有什么方法呢？1、发布者-订阅者模式：当一个对象(发布者)状态发生改变时，所有依赖它的对象(订阅者)都会得到通知。通俗点来讲，发布者就相当于报纸，而订阅者相当于读报纸的人。2、脏值检查：通过存储旧的数据，和当前新的数据进行对比，观察是否有变更，来决定是否更新视图。angular.js 就是通过脏值检查的方式。最简单的实现方式就是通过 setInterval 定时轮询检测数据变动，但这样无疑会增加性能，所以， angular 只有在指定的事件触发时进入脏值检测。3、数据劫持：通过 Object.defineProperty 来劫持各个属性的 setter，getter，在数据变动时触发相应的方法。VUE是如何实现数据响应式的呢？

VUE.js 则是通过数据劫持结合发布者-订阅者模式的方式。

当执行 new VUE 时，VUE 就进入了初始化阶段，VUE会对指令进行解析(初始化视图，增加订阅者，绑定更新函数)，同时通过 Obserber会遍历数据并通过 Object.defineProperty 的 getter 和 setter 实现对的监听， 当数据发生变化的时候，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify， Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

我来依次介绍一下图中的重要的名词：1、Observer：数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用 Object.defineProperty 的 getter 和 setter 来实现2、Compile：指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、Dep：订阅者收集器或者叫消息订阅器都可以，它在内部维护了一个数组，用来收集订阅者，当数据改变触发 notify 函数，再调用订阅者的 update 方法4、Watcher：订阅者，它是连接 Observer 和 Compile 的桥梁，收到消息订阅器的通知，更新视图5、Updater：视图更新所以我们想要实现一个 VUE 响应式，需要完成数据劫持、依赖收集、 发布者订阅者模式。下面我来介绍我模仿源码实现的功能：

1、数据的响应式、双向绑定，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者

2、解析 VUE 常用的指令 v-html，v-text，v-bind，v-on，v-model，包括( @ 和 : )

3、数组变异方法的处理

4、在 VUE 中使用 this 访问或改变 data 中的数据

我们想要完成以上的功能，需要实现如下类和方法：

1、实现 Observe r类：对所有的数据进行监听

2、实现 array 工具方法