2019前端vue面试笔试题准备

忘是亡心i 2022-01-07 05:45 384阅读 0赞

本文参考了以下链接：

[https://segmentfault.com/a/1190000018225708?utm\_source=tag-newest][https_segmentfault.com_a_1190000018225708_utm_source_tag-newest]

[https://www.cnblogs.com/chenjg/p/9541291.html][https_www.cnblogs.com_chenjg_p_9541291.html]

【DOM Tree】

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3BlaXNp_size_16_color_FFFFFF_t_70][]

### 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][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步。

[https_segmentfault.com_a_1190000018225708_utm_source_tag-newest]: https://segmentfault.com/a/1190000018225708?utm_source=tag-newest
[https_www.cnblogs.com_chenjg_p_9541291.html]: https://www.cnblogs.com/chenjg/p/9541291.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3BlaXNp_size_16_color_FFFFFF_t_70]: /images/20211227/a74643a64b724017ba66eb534673244b.png