写在前面
CSDN话题挑战赛第1期
-
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
-
参赛话题：前端面试宝典
-
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！ -
创作模板：
携手共筑前端面试宝典
1、虚拟DOM是什么？有什么优缺点？
由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。
优点：
1、保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，他的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，既保证性能的下限。
2、无需手动操作DOM：我们不需手动去操作DOM，只需要写好 View-Model的 代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器端渲染、weex开发等等。
缺点：
1、无法进行极致优化：虽然虚拟DOM + 合理的优化，足以应对大部分应用的性能需要，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。
2、v-model 原理
v-model 只是语法糖而已。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件。
1、 text 和 textarea 元素使用 value property 和 input 事件；
2、 checkbox 和 radio 使用 checked property 和 change事件；
3、 select 字段将 value 作为 prop 并将 change 作为事件。
注意：对于需要使用输入法的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。
在普通元素上：
input v-model='testName'
input v-bind:value='testName' v-on:input='testName = $event.target.value'
3、你都做过哪些 Vue 的性能优化？
1、对象层级不要过深，否则性能就会差。
2、不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
3、v-if 和 v-show 区分使用场景
4、computed 和 watch 区分场景使用
5、v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
6、大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
7、防止内部泄露，组件销毁后把全局变量和时间销毁
8、图片懒加载
9、路由懒加载
10、异步路由
11、第三方插件的按需加载
12、适当采用 keep-alive 缓存组件
13、防抖、节流的运用
14、服务端渲染 SSR or 预渲染
这里知识针对Vue的性能优化，没有阐述其他方面的。
写在最后
CSDN话题挑战赛第1期