职来职往vue常见面试题及职场提升

Vue常见面试题： 挑选了几个一般难度的大家看看： 14、单页面应用和多页面应用区别及缺点 单页面应用（SPA），通俗的说就是指只有一个主页面的应用，浏览器一开始就加载所有的js、html、css。所有的页面内容都包含在这个主页面中。但在写的时候，还是分开写，然后再加护的时候有路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多用于pc端。 多页面（MPA），就是一个应用中有多个页面，页面跳转时是整页刷新 单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离，页面效果会比较酷炫 单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。初次加载时耗时多；页面复杂度提高很多。 15、Vue 项目中为什么要在列表组件中写 key，其作用是什么？ key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。 更准确 因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复 Vue.js 是一款流行的前端框架，以其轻量级、速度快、简单易学的特性深受开发者喜爱。在面试中，Vue 的常见问题涵盖了多个方面，包括框架优势、数据绑定、组件通信、DOM 操作以及项目构建等。以下是一些关键知识点的详细解析： 1. **Vue 优点**： - **轻量级**：Vue.js 文件大小小巧，可以快速加载。 - **速度快**：Vue 利用虚拟DOM和高效的更新策略，提高了性能。 - **简单易学**：API设计直观，学习曲线平缓，适合新手入门。 - **低耦合**：组件化开发使得代码可复用，易于维护。 - **可重用性**：组件设计允许在不同项目中重复使用。 - **独立开发**：Vue.js 可以单独使用，不依赖其他大型库。 - **文档齐全**：官方文档详细且中文支持，方便开发者查阅。 2. **Vue 父子组件数据传递**： - **props**：用于从父组件向子组件传递数据。 - **$emit**：子组件触发事件，将数据传递回父组件。 3. **v-show 和 v-if 指令**： - **共同点**：两者都可以根据条件控制元素的显示和隐藏。 - **不同点**： - `v-if` 动态地在DOM树中添加或移除元素，适合条件不太可能改变的情况，性能消耗较高。 - `v-show` 通过改变元素的CSS `display` 属性实现，适合频繁切换，但初始渲染成本高。 4. **CSS隔离**： - `scoped` 属性确保CSS只在当前组件内生效，防止样式冲突。 5. **DOM操作**： - `ref` 属性用于在DOM元素上添加唯一引用，可以通过`this.$refs`访问。 6. **Vue 指令**： - `v-model`：实现双向数据绑定，常用于表单元素。 - `v-on`：用于绑定事件监听器，如`v-on:click`。 - `v-html`：将字符串内容作为HTML插入到元素中。 - `v-text`：将文本内容插入到元素中。 - `v-once`：只渲染元素和组件一次，后续数据改变不再更新。 - `v-if` 和 `v-show`：如前所述，控制元素的显示与隐藏。 7. **vue-loader**： - 是一个转换工具，将 Vue 文件中的模板、脚本和样式转换为浏览器可理解的JavaScript模块。 8. **key 的作用**： - 在列表渲染时，key 提供了每个vnode的唯一ID，有助于Vue更高效地识别和处理DOM更新。 9. **$nextTick**： - 在数据变更后，延迟执行回调，确保DOM已更新，用于数据改变后的DOM操作。 10. **Vue 组件的data为何必须是函数**： - 防止组件复用时数据污染，每个组件实例都有自己的数据副本。 11. **Vue 双向数据绑定**： - 通过 `Object.defineProperty()` 数据劫持和发布订阅模式实现，确保数据和视图同步更新。 12. **生命周期钩子顺序**： - 父组件的生命周期钩子先于子组件执行，子组件的`mounted`会在父组件`mounted`之后。 13. **Vue 数组更新**： - 为了触发视图更新，需使用 Vue 提供的数组变异方法（如 `push`, `pop`, `splice` 等）。 14. **Vue 生命周期**： - 描述组件从创建、初始化、渲染、更新到销毁的完整过程，帮助开发者在合适时机执行逻辑。 15. **首次加载的钩子**： - 对于Vue组件，首次加载时会触发 `beforeCreate`, `created`, `beforeMount`, `mounted` 钩子。 16. **created 和 mounted 区别**： - `created`：数据绑定已完成，但DOM未创建。 - `mounted`：组件实例挂载到DOM上，可以访问真实DOM元素。 这些知识点涵盖了Vue开发中的基础概念和技术，理解和掌握它们对于面试和实际开发都非常关键。在职场中，持续学习和提升这些技能将有助于成为一名优秀的前端开发者。