VUE面试题汇总（六）

往期点这里：↓
VUE面试题汇总（一）
VUE面试题汇总（二）
VUE面试题汇总（三）
VUE面试题汇总（四）
VUE面试题汇总（五）
51. 如何编译 template 模板？

参考答案：
参考

52. diff 算法

参考答案：
diff算法包括一下几个步骤:

1.用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
2.当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
3.把2所记录的差异应用到步骤1所构建的真正的DOM树上(patch)，视图就更新了

diff算法是通过同层的树节点进行比较而非对树进行逐层搜索遍历的方式，所以时间复杂度只有O(n)，是一种相当高效的算法。

参考

53. 批量异步更新策略及 nextTick 原理？

参考答案：
参考

54. Vue 中如何实现 proxy 代理？

参考答案：

webpack 自带的 devServer 中集成了 http-proxy-middleware。配置 devServer 的 proxy 选项即可

proxyTable: {
    '/api': {
        target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号
        changeOrigin: true, // 跨域
        pathRewrite: {
            '^/api': '/'
        }
    }
}

55. vue 中如何实现 tab 切换功能？

参考答案：
参考

56. vue 中如何利用 keep-alive 标签实现某个组件缓存功能？

参考答案：
参考

57. vue 中实现切换页面时为左滑出效果

参考答案：
参考

58. vue 中央事件总线的使用

参考答案：
参考

59. vue 的渲染机制

参考答案：

1.new Vue，执行初始化
2.挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
3.通过Watcher监听数据的变化
4.当数据发生变化时，Render函数执行生成VNode对象
5.通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

至此，整个new Vue的渲染过程完毕。

参考

60. vue 在什么情况下在数据发生改变的时候不会触发视图更新

参考答案：

v-for 遍历的数组，当数组内容使用的是 arr[0]. xx =xx 更改数据，vue 无法监测到
vm. arr. length = newLength 也是无法检测的到的