Vue2面试精华：100问覆盖核心知识点

Vue2面试题100问旨在帮助求职者准备面试，涵盖了一系列核心知识点。以下是一些重点问题的详细解答： 1. **Vue理解**： - Vue由华裔前Google工程师尤雨溪创建，自2014年发布以来不断发展，至2020年已升级至3.0.0版本。 - Vue是一个渐进式框架，专注于视图层的渲染，依赖第三方库提供扩展支持。 - 应用场景广泛，包括但不限于SPA网站、后台管理、移动应用、微信小程序和App开发。 - Vue因其简洁、体积小、高效、MVVM架构和易于集成第三方库而受到欢迎。 2. **声明式与命令式编程**： - 声明式编程强调描述结果，而非控制过程，如Vue的模板语法，开发者只需声明UI结构，Vue负责更新DOM。 - 命令式编程则关注具体的实现步骤，如JavaScript中的函数调用，如数组的map方法。 3. **Vue核心特性**： - 采用声明式编程，避免直接操作DOM。 - 支持响应式数据，数据变化时自动更新视图。 - 实现双向数据绑定，数据修改时视图会自动同步更新。 4. **防止页面加载花括号**： - 使用`v-cloak`指令隐藏未编译的模板，配合CSS规则如`display:none`，确保页面加载初期不会显示{{ }}。 5. **v-for与v-if**： - 可以同时使用，但需注意性能优化，尽量减少`v-if`，因为每次切换都会重新渲染整个列表。 - `v-if`用于条件渲染，仅在满足条件时展示元素；`v-show`虽也影响渲染状态，但更适用于不需依赖更新时的重渲染。 6. **v-if与v-show**： - 区别在于，`v-if`会从DOM中移除元素（条件不成立时不渲染），`v-show`只是隐藏显示，不会从DOM中移除。 - `v-if`更适合条件复杂的逻辑，`v-show`适合轻量级的切换需求。 7. **v-on**： - 可以监听多个方法，通过`.on('event', callback)`方式注册事件处理器。 8. **修饰符**： - `v-on`修饰符如.stop、.prevent、.delegate等，用于控制事件行为； - `v-model`修饰符如.sync、.number、.trim等，用于数据绑定时的行为控制。 9. **动态样式绑定**： - Vue支持使用`v-bind:class`和`v-bind:style`动态绑定样式，根据数据变化改变CSS类名或样式属性。 10. **响应式数据修改**： - 对于数组，Vue不能通过下标直接修改响应式部分，以防意外触发视图更新。对象则可以通过路径操作，如`this.$set(obj, 'path.to.value', newValue)`。 11. **v-for循环中key的重要性**： - 当循环数据无唯一值时，设置`key`有助于Vue跟踪每个元素，防止渲染性能问题。 12. **事件绑定位置**： - 在HTML中绑定事件是为了处理用户交互，通常在元素上直接绑定，以保证事件响应的及时性。 13. **methods、watch和computed的差异**： - methods用于执行函数逻辑；watch用于监听数据变化执行回调；computed是基于其他数据计算的响应式属性，通常用于逻辑处理而非直接操作数据。 14. **Vue实例结构**： - 重要组成部分包括：实例、模板、数据、生命周期钩子、组件、指令和API。 15. **组件开发注意事项**： - 定义组件时考虑复用性、props和事件通信；使用时注意命名、父子组件通信、组件注册和引用。 16. **块状内容输出**： - Vue通过`v-for`和`<template>`标签包裹内容实现块级渲染。 17. **组件关系和数据传递**： - 组件间关系包括嵌套、父子、兄弟；数据传递有props、事件bus、自定义属性和Vuex等方式。 这些知识点覆盖了Vue2的核心概念、编程模式、性能优化和组件开发等方面，对面试者来说是全面且实用的知识储备。