VUE面试题汇总（五）

往期点这里：↓
VUE面试题汇总（一）
VUE面试题汇总（二）
VUE面试题汇总（三）
VUE面试题汇总（四）
41. vue的双向绑定的原理，和angular的对比

参考答案：
1、vue原理

数据劫持： vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

2、angular原理

脏值检查：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，然而angular只有在指定的事件触发时进入脏值检测。

42. vue 如何优化首屏加载速度？

参考答案：
参考

43. vue 打包命令是什么？

参考答案：npm run build

44. vue 打包后会生成哪些文件？

参考答案：
dist文件夹下：

1. css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里
2. css文件夹下的.css.map文件是一个Source map文件，Source
   map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码，只是方便我们开发的时候做调试使用。
3. js文件夹下的.js.map依然是Source map文件，方便我们开发时调试js代码使用。
4. app.js文件里放的是项目中各个页面的逻辑代码
5. vendor.js放的是各个页面各个组件公用的一些代码

45. 如何配置 vue 打包生成文件的路径？

参考答案：
参考

46. vue 的服务器端渲染

参考答案：
参考

47. vue 开发命令 npm run dev 输入后的执行过程

参考答案：
参考

48. 什么是 Virtual DOM？

参考答案：可以看作是一个使用 javascript 模拟了 DOM 结构的树形结构

解析：参考

49. 响应式系统的基本原理

参考答案：

vue响应式的原理，首先对象传入vue实例作为data对象时，首先被vue遍历所有属性，调用Object. defineProperty设置为getter和setter，每个组件都有一个watcher对象，在组件渲染的过程中，把相关的数据都注册成依赖，当数据发生setter变化时，会通知watcehr，从而更新相关联的组件

50. Vue. js 全局运行机制

参考答案：

流程分析：

1.初始化以及挂载init, mount
2.在进行模板编译compile，将template编译为渲染函数render function
3.执行render function生成Virtual DOM, render function => VNode tree
4.再进行响应式依赖收集，render function => getter, setter => Watcher.update => patch。以及使用队列进行异步更新的策略。
5.通过diff算法后进行patch更新视图