前言

本来想总结一篇Vue的面经，结束这个中高级Web前端面经系列的文章。没想到Vue的内容有些长，所以就分成了两个部分。这里是上部分的内容：

冲击BAT，寒冬逆袭必备面经：Vue必问题目

当然，既然已经提到了，是一个系列文章，那么之前的文章也贴出来：

“金三银四”，让我们愉快的开始准备Web面经吧：CSS篇

“金三银四”，让我们愉快的开始准备Web面经吧：JavaScript-上

元宵节，猿宵节，写代码之余面经走一波：JavaScript篇

中高端Web前端面试题，直击BAT：JavaScript篇

正文

1. virtual dom 原理实现

• 创建 dom 树
• 树的diff，同层对比，输出patchs(listDiff/diffChildren/diffProps)
• 没有新的节点，返回
• 新的节点tagName与key不变， 对比props，继续递归遍历子树
• 对比属性(对比新旧属性列表):
• 旧属性是否存在与新属性列表中
• 都存在的是否有变化
• 是否出现旧列表中没有的新属性
• tagName和key值变化了，则直接替换成新节点
• 渲染差异
• 遍历patchs， 把需要更改的节点取出来
• 局部更新dom

// diff算法的实现梳理
function diff(oldTree, newTree) {
	 // 差异收集
 let pathchs = {}
 dfs(oldTree, newTree, 0, pathchs)
 return pathchs
}
function dfs(oldNode, newNode, index, pathchs) {
 let curPathchs = []
 if (newNode) {
 // 当新旧节点的 tagName 和 key 值完全一致时
 if (oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
 	 // 继续比对属性差异
 let props = diffProps(oldNode.props, newNode.props)
 curPathchs.push({ type: 'changeProps', props })
 // 递归进入下一层级的比较
 diffChildrens(oldNode.children, newNode.children, index, pathchs)
 } else {
 	 // 当 tagName/key 修改了后，表示已经是全新节点，则没必要继续比了
 curPathchs.push({ type: 'replaceNode', node: newNode })
 }
 }
	 // 构建出整颗差异树
 if (curPathchs.length) {
 		if(pathchs[index]){
 			pathchs[index] = pathchs[index].concat(curPathchs)
 		} else {
 			pathchs[index] = curPathchs
 		}
 }
}
// 属性对比实现
function diffProps(oldProps, newProps) {
 let propsPathchs = []
 // 遍历新旧属性列表
 // 查找删除项、修改项、查找新增项
 forin(olaProps, (k, v) => {
 if (!newProps.hasOwnProperty(k)) {
 propsPathchs.push({ type: 'remove', prop: k })
 } else {
 if (v !== newProps[k]) {
 propsPathchs.push({ type: 'change', prop: k , value: newProps[k] })
 }
 }
 })
 forin(newProps, (k, v) => {
 if (!oldProps.hasOwnProperty(k)) {
 propsPathchs.push({ type: 'add', prop: k, value: v })
 }
 })
 return propsPathchs
}
// 对比子级差异
function diffChildrens(oldChild, newChild, index, pathchs) {
		// 标记子级的删除/新增/移动
 let { change, list } = diffList(oldChild, newChild, index, pathchs)
 if (change.length) {
 if (pathchs[index]) {
 pathchs[index] = pathchs[index].concat(change)
 } else {
 pathchs[index] = change
 }
 }
	 // 根据 key 获取原本匹配的节点，然后递归从头开始对比
 oldChild.map((item, i) => {
 let keyIndex = list.indexOf(item.key)
 if (keyIndex) {
 let node = newChild[keyIndex]
 // 进一步递归对比
 dfs(item, node, index, pathchs)
 }
 })
}
// 1、列表对比，根据 key查找对应的匹配项
// 2、对比出新旧列表的新增/删除/移动
function diffList(oldList, newList, index, pathchs) {
 let change = []
 let list = []
 const newKeys = getKey(newList)
 oldList.map(v => {
 if (newKeys.indexOf(v.key) > -1) {
 list.push(v.key)
 } else {
 list.push(null)
 }
 })
 // 很直白的标记删除
 for (let i = list.length - 1; i>= 0; i--) {
 if (!list[i]) {
 list.splice(i, 1)
 change.push({ type: 'remove', index: i })
 }
 }
 // 标记新增以及移动
 newList.map((item, i) => {
 const key = item.key
 const index = list.indexOf(key)
 if (index === -1 || key == null) {
 // 新增
 change.push({ type: 'add', node: item, index: i })
 list.splice(i, 0, key)
 } else {
 // 移动
 if (index !== i) {
 change.push({
 type: 'move',
 form: index,
 to: i,
 })
 move(list, index, i)
 }
 }
 })
 return { change, list }
}

2. Proxy 相比于 defineProperty 的优势

• 数组变化也能监听到
• 不需要深度遍历监听

let data = { a: 1 }
let reactiveData = new Proxy(data, {
	get: function(target, name){
		// ...
	},
	// ...
})

3. vue-router

• modehash
• history
• 跳转
• this.$router.push()
• <router-link to=""></router-link>
• 占位
• <router-view></router-view>

4. vuex

• state: 状态中心
• mutations: 更改状态
• actions: 异步更改状态
• getters: 获取状态
• modules: 将state分成多个modules，便于管理

尾声

ok，到此vue框架面试常问题目就结束了。伴随着的这个共计7篇文章的中高级Web前端面经就结束了。

希望能给各位带来帮助吧~