一些面试题 - 《3.1 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法> 动态路由》

1 简答题
二、编程题

1 简答题

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

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

答：
不是，在vue 中通过 Vue.set() 方法可以设置响应式数据，或者vm.$set()设置。Vue.set() 方法，先去新建了一个 Dep 实例，再去判断类型是数组或者对象，然后把新添加的值添加到数组或者对象上，调用 defineReactive 方法，方法先将 value 设置为 observer 对象，里面会递归设置所有属性为响应式，然后用 Objec.definePropery 去监听 Object 的 key，在 getter 里面，判断 Dep.target 存在与否，存在就把 target 赋值给 Dep 实例的 subs 数组中，然后再 Vue.set 方法中的最后面调用 dep.notify() 方法，调用 dep 实例下 subs 数组中所有成员的 update 方法

2、请简述 Diff 算法的执行过程
答:
当调用 patch 函数时，先去判断旧节点是否为 vnode，不是则转换为 vnode；然后判断新旧 vnode 是否为 sameVnode(sel/key相等)，如果是则比对更新 DOM，如果不是则创建 DOM 并插入到 DOM 树中。sameVnode 的情况下，执行patchVnode 函数比对更新，内部会判断新 vnode 是否有 text 属性，如果有再去判断新旧 vnode 的 text 是否相等，不相等则移除旧的 vnode，设置新的 vnode 的 textContent; 如果新的 vnode 没有 text 属性，而且新旧 vnode 都要children，且两个不相等，此时会调用 updateChildren 方法，此时才是真正 diff 算法执行的地方；
在 updateChildren 中，传入的新旧 vnode 的children 数组，比对两个数组先从两个数组的第一个开始，如果相同则比对的指针后移到下一轮循环，如果不同则比对从两个数组的最后一个，相同则前移到下一轮循环，如果还不同则从旧节点 children 数组的第一个跟新节点 children 数组的最后一个对比，如果相同则把旧 children 数组的第一个移动到当前指针的最后面，更新对应指针到下一轮循环；如果还不同则比对旧 children 数组的最后一个和新 children 数组的第一个，如果相同则把旧 children 数组的最后一个移动到当前指针的最前面，更新指针到下一轮循环；
如果这四种情况都不满足，则拿当前旧 children 的前后指针遍历后，根据 key 生成 map，以新 children 数组当前指针对象的key 去map 中找，如果找不到说明是新元素，则插入到 dom 中，如果找到了再去比对 map 对应的旧 children 指针节点的sel 和当前遍历新 children 中指针节点的sel 是否相同，不同则插入 DOM，相同则递归调用 patchVnode，并且插入 DOM;
最后，对比两个数组的开始和结束指针，如果在开始小于等于结束指针，判断如果旧节点数组开始指针大于结束指针，说明新节点没遍历完，此时根据新节点数组的开始结束指针，把数组剩下的内容插入到 DOM 中；如果旧节点数组开始指针小于等于结束指针，说明旧节点没遍历完，根据指针移除剩余的旧节点；

二、编程题

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

新建VueRouter 类，添加静态 install(vue) 方法，方法内部判断 VueRouter 是否已安装，没有的话把插件置为安装状态，继续执行；存储install 方法传入的vue 对象，留在后续调用；把创建vue 实例时传入的 router 对象注入到 vue 实例上，需要通过vue 的mixin 混入来解决 this 的问题；在beforeCreate 钩子里给 vue 原型上添加 $router，并调用$router 的 init方法
init 方法中初始化 RouterLink 和 RouterView 组件
RouterLink 组件中通过 render 函数添加点击方法，点击后更新 current
RouterView 组件中通过 render 函数，动态生成视图
挂载 hashchange 事件，通过改变响应式属性 current 来改变视图 ```javascript // vuerouter/index.js let _Vue = null

export default class VueRouter { static install(vue) { if(VueRouter.install.installed) { return } VueRouter.install.installed = true _Vue = vue

_Vue.mixin({
  beforeCreate() {
    if(this.$options.router) {
      _Vue.prototype.$router = this.$options.router
      this.$options.router.init()
    }
  },
})

}

constructor(options) { this.options = options this.routerMap = {} this.data = _Vue.observable({ current: window.location.hash.substr(1) }) }

init() { this.createRouterMap() this.initComponents(_Vue) this.initEvent() }

createRouterMap () { this.options.routes.forEach(route => { this.routerMap[route.path] = route.component }) }

initComponents (Vue) { Vue.component(‘router-link’, { name: ‘RouterLink’, props: { to: String }, render(h) { return h(‘a’, { attrs: { href: this.to }, on: { click: this.clickHandler } },[this.$slots.default]) }, methods: { clickHandler(e) { // 调用 pushstate 方法改变地址栏的地址 history.pushState({},’’,’#’ + this.to) // 跟换视图 this.$router.data.current = this.to // 阻止浏览器的默认行为 e.preventDefault(); } }, })

const self = this 
Vue.component('router-view', {
  render(h) {
    // 当前路由地址
    console.log(self.routerMap)
    console.log(self.data.current)
    const component = self.routerMap[self.data.current]
    return h(component)
  }
})

}

initEvent() { window.addEventListener(‘hashchange’, () => { console.log(‘hashchange’, window.location.hash.substr(1)) this.data.current = window.location.hash.substr(1) }) } }

2、在模拟 Vue.js 响应式源码的基础上实现 v-html 指令，以及 v-on 指令。
```javascript
// 调用指令的方法
  update (node, key, attrName) {
    let name = attrName.split(':')[0]
    let event = attrName.split(':')[1]
    let updateFn = this[name + 'Updater']
    updateFn && updateFn.call(this, node, this.vm[key], key, event)
  }
  // 处理 v-html 指令 
  htmlUpdater (node, value, key) {
    node.innerHTML = this.vm[key]
    new Watcher(this.vm, key, newValue => {
      node.innerHTML = newValue
    })
  }
  // 处理 v-on 指令
  onUpdater (node, value, key, event) {
    let methodsStrArr = key.split('(')
    let methodName = methodsStrArr[0];
    let params = methodsStrArr[1] && methodsStrArr[1].split(')')[0]
    let [...arg] = params && params.split(',') || []
    let originEvent = false
    if(arg[arg.length - 1] === '$event') {
      arg.splice(arg.length - 1,1)
      originEvent = true
    }
    node.addEventListener(event, e => {
      if(originEvent) {
        this.vm.$options.methods[methodName](...arg, e)
      } else {
        this.vm.$options.methods[methodName](...arg)
      }
    })
  }

3、参考 Snabbdom 提供的电影列表的示例，利用Snabbdom 实现类似的效果
1 拷贝 html、css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Reorder animation</title>
  <link rel="stylesheet" href="./src/07-top10Movies.css">
</head>
<body>
  <div id="container"></div>
  <script src="./src/07-top10movie.js"></script>
</body>
</html>

// 07-top10Movies.css
body {
    background: #fafafa;
    font-family: sans-serif;
}
h1 {
    font-weight: normal;
}
.btn {
    display: inline-block;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    padding: 0.5em 0.8em;
    transition: box-shadow 0.05s ease-in-out;
    -webkit-transition: box-shadow 0.05s ease-in-out;
}
.btn:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.btn:active,
.active,
.active:hover {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 4px rgba(0, 0, 0, 0.1);
}
.add {
    float: right;
}
#container {
    max-width: 42em;
    margin: 0 auto 2em auto;
}
.list {
    position: relative;
}
.row {
    overflow: hidden;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    left: 0px;
    margin: 0.5em 0;
    padding: 1em;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-out,
        left 0.5s ease-in-out;
    -webkit-transition: transform 0.5s ease-in-out, opacity 0.5s ease-out,
        left 0.5s ease-in-out;
}
.row div {
    display: inline-block;
    vertical-align: middle;
}
.row > div:nth-child(1) {
    width: 5%;
}
.row > div:nth-child(2) {
    width: 30%;
}
.row > div:nth-child(3) {
    width: 65%;
}
.rm-btn {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    color: #c25151;
    width: 1.4em;
    height: 1.4em;
    text-align: center;
    line-height: 1.4em;
    padding: 0;
}

2 写 js

// 07-top10movie.js
// 引入模块
import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h';
import { classModule } from 'snabbdom/build/package/modules/class';
import { propsModule } from 'snabbdom/build/package/modules/props';
import { styleModule } from 'snabbdom/build/package/modules/style';
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners';
// 初始化
var patch = init([classModule, propsModule, styleModule, eventListenersModule])
var vnode
var nextKey = 11
var margin = 8
var sortBy = 'rank'
var totalHeight = 0
var originalData = [
  { rank: 1, title: 'The Shawshank Redemption', desc: 'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.', elmHeight: 0 },
  { rank: 2, title: 'The Godfather', desc: 'The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.', elmHeight: 0 },
  { rank: 3, title: 'The Godfather: Part II', desc: 'The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.', elmHeight: 0 },
  { rank: 4, title: 'The Dark Knight', desc: 'When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.', elmHeight: 0 },
  { rank: 5, title: 'Pulp Fiction', desc: 'The lives of two mob hit men, a boxer, a gangster\'s wife, and a pair of diner bandits intertwine in four tales of violence and redemption.', elmHeight: 0 },
  { rank: 6, title: 'Schindler\'s List', desc: 'In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.', elmHeight: 0 },
  { rank: 7, title: '12 Angry Men', desc: 'A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.', elmHeight: 0 },
  { rank: 8, title: 'The Good, the Bad and the Ugly', desc: 'A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.', elmHeight: 0 },
  { rank: 9, title: 'The Lord of the Rings: The Return of the King', desc: 'Gandalf and Aragorn lead the World of Men against Sauron\'s army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.', elmHeight: 0 },
  { rank: 10, title: 'Fight Club', desc: 'An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...', elmHeight: 0 },
]
var data = [
  originalData[0],
  originalData[1],
  originalData[2],
  originalData[3],
  originalData[4],
  originalData[5],
  originalData[6],
  originalData[7],
  originalData[8],
  originalData[9],
]
// 排序
function changeSort (prop) {
  sortBy = prop
  data.sort((a, b) => {
    if (a[prop] > b[prop]) {
      return 1
    }
    if (a[prop] < b[prop]) {
      return -1
    }
    return 0
  })
  render()
}
// 新增
function add () {
  var n = originalData[Math.floor(Math.random() * 10)]
  data = [{ rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }].concat(data)
  render()
}
// 删除
function remove (movie) {
  data = data.filter((m) => {
    return m !== movie
  })
  render()
}
// 列表渲染
function movieView (movie) {
  return h('div.row', {
    key: movie.rank,
    style: {
      opacity: '0',
      transform: 'translate(-200px)',
      delayed: { transform: `translateY(${movie.offset}px)`, opacity: '1' },
      remove: { opacity: '0', transform: `translateY(${movie.offset}px) translateX(200px)` }
    },
    hook: { insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight } }, // 插入之前赋值
  }, [
    h('div', { style: { fontWeight: 'bold' } }, movie.rank),
    h('div', movie.title),
    h('div', movie.desc),
    h('div.btn.rm-btn', { on: { click: () => {
      remove(movie)
    }} }, 'x'),
  ])
}
// 动态计算每个行的位置
function render () {
  data = data.reduce((acc, m) => {
    var last = acc[acc.length - 1]
    m.offset = last ? last.offset + last.elmHeight + margin : margin
    return acc.concat(m)
  }, [])
  totalHeight = data.length === 0
    ? 0
    : data[data.length - 1].offset + data[data.length - 1].elmHeight
  vnode = patch(vnode, view(data))
}
// 视图渲染
function view (data) {
  return h('div', [
    h('h1', 'Top 10 movies'),
    h('div', [
      h('a.btn.add', { on: { click: add } }, 'Add'),
      'Sort by: ',
      h('span.btn-group', [
        h('a.btn.rank', { class: { active: sortBy === 'rank' }, on: { click: ()=>{changeSort('rank')} } }, 'Rank'),
        h('a.btn.title', { class: { active: sortBy === 'title' }, on: { click: ()=>{changeSort('title')} } }, 'Title'),
        h('a.btn.desc', { class: { active: sortBy === 'desc' }, on: { click: ()=>{changeSort('desc')} } }, 'Description'),
      ]),
    ]),
    h('div.list', { style: { height: totalHeight + 'px' } }, data.map(movieView)),
  ])
}
// 首次加载
window.addEventListener('DOMContentLoaded', () => {
  var container = document.getElementById('container')
  vnode = patch(container, view(data))
  render()
})