往期点这里:↓
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文件夹下:
- css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候,会把所有的css样式打包到这里
- css文件夹下的.css.map文件是一个Source map文件,Source
map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码,只是方便我们开发的时候做调试使用。 - js文件夹下的.js.map依然是Source map文件,方便我们开发时调试js代码使用。
- app.js文件里放的是项目中各个页面的逻辑代码
- 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更新视图