设计理念

大家都知道，vue是一个典型的MVVM框架。那什么是MVVM、在vue中又是怎么体现的呢？

MVVM

M

M代表的是模型Model。是展示在页面中的数据，在vue中指向的是data中的数据模型。

V

V代表的是视图View。是展示的页面，指向的是vue中的模板引擎（template模板）。

VM

VM代表的是ViewModel。不需要通过我们的操作将数据解析展示到视图上，以及数据发生改变，页面上的视图自动会发生相应改变。

那么vue是如何将视图和逻辑操作分开，这就很有必要提到vue中数据驱动的特点。那么这些数据又是如何在视图中展示的呢？ vue通过数据响应式监听数据的变化并在视图中更新；
模板引擎提供描述视图的模板语法（类html。提供一些vue特有指令、插值）；
渲染：将模板语法转为html（AST=>vdom=>dom）。

数据响应式

简单响应式

vue中的监听数据变化：
vue2: Object.defineProperty()
vue3: Proxy
两者简单的响应数据案例可以查看这篇文章。

<div id="app"></div>
<script>
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val
    },
    set(newVal) {
      if (val != newVal)
        val = newVal
      // 数据发生变化通知视图更新
      update()
    }
  })
}
function update() {
  content.innerHTML = `<h1>${obj.name}</h1>`
}
let obj = { name: 'clying' }
let content = document.getElementById('app')
update()
// 响应式处理
defineReactive(obj, 'name', 'clying')
setTimeout(() => {
obj.name = 'deng'
console.log(obj.name);
}, 1000)
</script>

运行代码，我们可以看到页面一开始展示clying,经过1秒之后变为deng。通过这个简单的案例，我们可以实现简单的obj对象响应式地对页面进行渲染。

递归响应式

上述案例中只是对deep=1的对象进行了数据监听。那么具有深度的obj对象又是如何监听变化的呢？

这时候就需要遍历obj对象，对对象中的每个属性进行数据监听。通过Object.keys返回一个obj中所有元素为字符串的数组，对其进行setter和getter拦截。

// 先来一个具有深度的对象
let obj = {
  name: 'clying',
  arr: [
    1,
    {
      namearr: '2',
    },
  ],
  children: {
    name1: 'deng',
    children: {
      name2: 'clying deng',
    },
  },
}

function defineReactive(obj, key, val) {
  observe(val) // 子属性可能仍为对象，在对其进行拦截
  Object.defineProperty(obj, key, {
    get() {
      console.log('获取', key)
      return val
    },
    set(newVal) {
      if (newVal !== val) val = newVal
      console.log('设置新值', key, obj[key])
    },
  })
}
function observe(obj) {
  if (typeof obj !== 'object' || obj === null) return
  Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]))
}
observe(obj)
obj.children.name1 = 'l'

当设置obj.children.name1时，先获取到children属性，发现children仍是一个对象，继续遍历。获取到children中的name1属性时，发现不是对像，对name1进行拦截，设置新值。

动态添加属性

当我想要根据上例，对obj动态添加一个age属性时，其实是没有作用的。defineProperty无法检测新增属性，这也涉及到vue2的一个弊端。这就要额外使用到vue2中的set API方法。

function set(obj, key, val) {
  defineReactive(obj, key, val)
}
set(obj, 'age', 22)
obj.age

可以看出set方法其实也是利用defineProperty去添加新属性，只是需要用户手动调用。通过调用set，使obj中新属性age可以被拦截到。

注意set用法：
set方法对于接收的目标参数必须是响应式的，可以在源码set方法中看到，一开始就会去判断传入的目标值是否是原始值、undefined或null，如果是这些情况直接警告。如果想要删除属性，相同的需要手动调用delete方法。
注：observer文件夹index.js 201行

数组响应式

defineProperty方法其实是可以拦截到像arr[0] = 1这种，通过index下标赋值的数组。但是它无法支持数组中push、pop等数组的原型方法。我们需要拦截数组的7个方法，重写他们，就是干！

因为我们只是简单的模仿，没有写Observe类。在此我将Observe类中拆成observe方法（判断是数组还是对象，分别监听）、observeArray循环遍历监听数组属性。

function observeArray(arr) {
  arr.forEach((_) => observe(_))
}
function observe(obj) {
  if (typeof obj !== 'object' || obj == null) return
  if (Array.isArray(obj)) {
    obj.__proto__ = arrayMethods // 继承原型方法属性
    observeArray(obj)
  } else {
    Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]))
  }
}

比较核心的还是在 obj.__proto__ = arrayMethods中，使当前遍历到的数组的原型链可以指向我们重写的数组方法。

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse',
]
let oldArrayMethods = Array.prototype
let arrayMethods = Object.create(oldArrayMethods) //arrayMethods的原型指向Array数组的原型，可以获取数组原型方法
methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    const result = oldArrayMethods[method].apply(this, args)
    let inserted // 当前用户插入的元素
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      // 3个 新增属性 splice 有删除 新增的功能 arr.splice(0,1,{name：1})
      case 'splice':
        inserted = args.slice(2)
      default:
        break
    }
    // let ob = this.__ob__;
    // ob.observeArray(inserted); // 插入的是对象或者数组的话还需要再次递归监听
    // update通知更新
    return result
  }
})

当我们通过obj.arr.push(1);obj.arr[1].namearr = 2时，可以看到控制台输出：

说明在push数组方法，和修改数组值时，数组都可以走到defineProperty中，被其拦截。
在此，数组插入的值可能是对象或数组时，仍需要对其插入的值进行监听。应该在Observe类中，先将这个实例保存（内部会含有observeArray方法）。然后，在arrayMethods中使用其observeArray方法，继续进行深度劫持。

至此，关于数据响应式就可以告一段落拉。如有不足，欢迎大家指正。

从设计理念到数据响应式