2019前端vue面试笔试题准备

本文参考了以下链接：

https://segmentfault.com/a/1190000018225708?utm_source=tag-newest

https://www.cnblogs.com/chenjg/p/9541291.html

【DOM Tree】

1.对MVVM开发模式的理解

model

view

ViewModel

2.vue有哪些指令

3.v-if 和 v-show 有什么区别

v-if：控制这个DOM节点的存在与否。动态的向DOM树里添加或者删除DOM元素。

v-show：控制元素的显示方式，将display属性在block和none来回切换。通过设置DOM元素的display样式控制显隐。

4.简述vue的响应式原理

当一个vue实例创建时，vue会遍历data选项的属性，用object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

https://www.cnblogs.com/chenjg/p/9541291.html

5.vue中如何在组件内部实现一个双向数据绑定？

假设有一个输入框组件，用户输入时，同步父组件页面中的数据

具体思路：父组件通过props传值给子组件，子组件通过$emit来通知父组件修改相应的props值。当输入数据时，父子组件中的数据是同步改变的。我们在父组件中做了两件事，一是给子组件传入props，二是监听input事件并同步自己的value属性。这两步操作可以精简。

6.vue中如何监控某个属性值的变化？

7.vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？

8.delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了empty/undefined，其他的元素的键值还是不变。

Vue.delete直接删除了数组，改变了数组的键值。

9.如何优化SPA应用的首屏加载速度慢的问题？

• 将公用的js库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度；
• 在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小app.bundel的体积，在调用某个组件时再加载对应的js文件；
• 加一个首屏loading图，提升用户体验；

10.前端如何优化网站性能？

11.网页从输入网址到渲染完成经历了哪些过程？

大致可以分为7步。