响应式原理和diff算法

当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。

let vm = new Vue({
 el: '#el'
 data: {
  o: 'object',
  dog: {}
 },
 method: {
  clickHandler () {
   // 该 name 属性是否是响应式的
   this.dog.name = 'Trump'
  }
 }
})

点击添加按钮时不是响应式数据，在实例化的时候在dog上添加name属性
内部原理是循环递归将所有data中的成员通过Object.defineProperty装换为响应式的数据

请简述 Diff 算法的执行过程

功能核心： diff 算法的核心，对比新旧节点的 children，更新 DOM
执行过程：

• 要对比两棵树的差异，我们可以取第一棵树的每一个节点依次和第二课树的每一个节点比 较，但是这样的时间复杂度为 O(n^3)

• 在DOM 操作的时候我们很少很少会把一个父节点移动/更新到某一个子节点

• 因此只需要找同级别的子节点依次比较，然后再找下一级别的节点比较，这样算法的时间复 杂度为 O(n)

• 在进行同级别节点比较的时候，首先会对新老节点数组的开始和结尾节点设置标记索引，遍 历的过程中移动索引

• 在对开始和结束节点比较的时候，总共有四种情况

  • oldStartVnode / newStartVnode (旧开始节点 / 新开始节点)
  • oldEndVnode / newEndVnode (旧结束节点 / 新结束节点)
  • oldStartVnode / oldEndVnode (旧开始节点 / 新结束节点)
  • oldEndVnode / newStartVnode (旧结束节点 / 新开始节点)

• 开始节点和结束节点比较，这两种情况类似

• 如果 oldStartVnode 和 newStartVnode 是 sameVnode (key 和 sel 相同)

  • 调用 patchVnode() 对比和更新节点
  • 把旧开始和新开始索引往后移动 oldStartIdx++ / oldEndIdx++
  • 更新索引

• oldStartVnode / newEndVnode (旧开始节点 / 新结束节点) 相同

  • 调用 patchVnode() 对比和更新节点
  • 把 oldStartVnode 对应的 DOM 元素，移动到右边

• oldEndVnode / newStartVnode (旧结束节点 / 新开始节点) 相同

  • 调用 patchVnode() 对比和更新节点
  • 把 oldEndVnode 对应的 DOM 元素，移动到左边
  • 更新索引

• 如果不是以上四种情况

  • 遍历新节点，使用 newStartNode 的 key 在老节点数组中找相同节点
  • 如果没有找到，说明 newStartNode 是新节点 创建新节点对应的 DOM 元素，插入到 DOM 树中
  • 如果找到了 判断新节点和找到的老节点的 sel 选择器是否相同 如果不相同，说明节点被修改了 重新创建对应的 DOM 元素，插入到 DOM 树中 如果相同，把 elmToMove 对应的 DOM 元素，移动到左边

• 如果老节点的数组先遍历完(oldStartIdx > oldEndIdx)，说明新节点有剩余，把剩余节点批量 插入到右边

• 如果新节点的数组先遍历完(newStartIdx > newEndIdx)，说明老节点有剩余，把剩余节点批 量删除