技术分享：实现 vue 的数据响应式原理

实现 vue 的数据响应式原理

这篇文章主要是给不了解或者没接触过 vue 响应式源码的小伙伴们看的，其主要目的在于能对 vue 的响应式原理有个基本的认识和了解，如果在面试中被问到此类问题，能够知道面试官想让你回答的是什么？「PS：文中如有不对的地方，欢迎小伙伴们指正」

响应式的理解

响应式顾名思义就是数据变化，会引起视图的更新。这篇文章主要分析 vue2.0 中对象和数组响应式原理的实现，依赖收集和视图更新我们留在下一篇文章分析。

在 vue 中，我们所说的响应式数据，一般指的是数组类型和对象类型的数据。vue 内部通过 Object.defineProperty 方法对对象的属性进行劫持，数组则是通过重写数组的方法实现的。下面我们就简单实现一下。

• 首先我们定义一个需要被拦截的数据

const vm = new Vue({
  data () {
    return {
      count: 0,
      person: { name: 'xxx' },
      arr: [1, 2, 3]
    }
  }
})
let arrayMethods
function Vue (options) { // 这里只考虑对 data 数据的操作
  let data = options.data
  if (data) {
    data = this._data = typeof data === 'function' ? data.call(this) : data
  }
  observer (data)
}
function observer(data) { 
  if (typeof data !== 'object' || data === null) {
    retu