手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法

一 简答题：

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

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

答：由于 Vue 不允许动态添加根级响应式 property，所以你必须在初始化实例前声明所有根级响应式 property，哪怕只是一个空值。
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
当你在初始化之后动态给data增加新成员，显然不能为新增加的属性添加getter/setter,所以初始化之后动态添加的属性不是响应式的。
如果我们想把新增属性设置为响应式的，可以用以下方法：
一 对于对象：
1. 可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property
2. 也可以使用this.$set(this.objectName,‘propertyName’,value)

二 对于数组
1. 可以使用 this.$set(vm.items, indexOfItem, newValue)
2. 也可以使用 vm.items.splice(newLength)

2、请简述 Diff 算法的执行过程

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

• 在进行同级别节点比较的时候，首先会对新老节点数组的开始和结尾节点设置表及索引，遍历的过程中移动索引；
• 在对开始和结束节点比较的时候，总共分四种情况：
  1. oldStartVNode / newStartVNode（旧开始节点 / 新开始节点）
  2. oldEndVNode / newEndVNode（旧结束节点 / 新结束节点）
  3. oldStartVNode / newEndVNode（旧开始节点 / 新结束节点）
  4. oldEndVNode / newStartVNode（旧结束节点 / 新开始节点）
  第一种和第二种这两种情况比较相似，如果oldStartVNode (oldEndVNode )与newStartVNode（oldEndVNode ）是sameVNode（key 和 sel相同），则调用patchVNode()对比和更新节点，然后把就得开始和新开始的索引向后移动oldStartIdx++ / oldEndIdx++；如下图
  
  
  第三种情况：当oldStartVNode 与 newEndVNode节点相同
  调用patchVNode()对比和更新节点，把oldStartVNode 对应的DOM元素，移动到右边，并更新索引，如下图：
  
  第四种情况：当oldEndVNode 与 newStartVNode 节点相同，则把oldEndVNode 对应的DOM元素移动到左边，并更新索引，如下图
  
  如果不是以上四种情况：

1. 遍历新节点，使用newStartVNode 的 key 在老节点的数组中找相同节点；如果没有找到，说明 newStartVNode 是新节点，则创建新节点对应的 DOM 元素，插入到DOM 树中；
   如果找到了，那么判断新节点和找到的老节点的 sel 选择器是否相同，如果不相同，说明节点被修改了，则重新创建对应的 DOM 元素插入到 DOM 树中；如果相同，把老节点对应的 DOM 元素移动到左边。具体过程参考下图
   
   当节点便利完成时，如果老节点的数组先遍历完成（oldStartIdx > oldEndIdx）,说明新节点有剩余，把剩余节点批量插入到右边。如下图：
   
   如果新节点的数组先遍历完（newStartIdx > oldEndIdx），说明老节点有剩余，把剩余节点批量删除。如下图：
   
   以上就是diff 算法的执行过程。

二、编程题

1、模拟 VueRouter 的 hash 模式的实现，实现思路和 History 模式类似，把 URL 中的 # 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。

实现思路：在创建 router-link 组件时,接收props 传递过来的“to”的值，拼接上“#”，并在render 函数中注册点击事件，将this.$router.data.current 的值变为传递过来的 to 的值，并改变地址栏中的hash 地址。
详细代码：https://github.com/mzqmarks/vue-router-hash/tree/master

2、在模拟 Vue.js 响应式源码的基础上实现 v-html 指令，以及 v-on 指令。

详细代码：https://github.com/mzqmarks/minvue

3、参考 Snabbdom 提供的电影列表的示例，利用Snabbdom 实现类似的效果，如图：

详细代码：https://github.com/mzqmarks/snabbdom-exam