Vue与React面试题解析

"Vue或React比对" Vue和React都是当今前端开发中广泛使用的JavaScript库，它们各自有独特的特性和优势。以下是对Vue和React的一些关键知识点的详细说明： **Vue篇** 1. **Vue2.0组件通信方式**：包括props、事件（$on/$emit）、Vuex（状态管理库）、提供者/注入、非父子组件间的Bus通信等。 2. **v-model双向绑定**：v-model结合了v-bind和v-on，它将值绑定到视图和模型，通过监听input事件并更新数据属性实现双向同步。 3. **Vuex与全局对象**：Vuex是状态管理模式，提供了集中式的管理，有严格的状态管理和变更规则；而全局对象是简单的赋值，无状态管理策略，容易引发状态混乱。 4. **生命周期钩子执行顺序**：在父组件中，beforeCreate -> created -> beforeMount -> mounted；在子组件中，父组件的mounted后才会执行子组件的beforeCreate -> created -> beforeMount -> mounted。 5. **v-show与v-if**：v-if根据条件决定是否渲染元素，v-show则总是渲染，只是改变CSS的display属性。v-if适合于条件不频繁切换，v-show适合频繁切换。 6. **computed与watch**：computed是基于依赖缓存的计算属性，当依赖改变时自动更新；watch用于监听数据变化并执行函数，可以深度监听或执行异步操作。 7. **Vue的响应式原理**：基于Object.defineProperty()，当数据改变时，通过依赖收集机制通知所有依赖更新。 8. **Object.defineProperty缺点**：性能问题，不能检测数组和对象属性的添加或删除，以及无法遍历。 9. **Vue2.0数组变化检测**：通过重写数组的方法如push、pop等来实现变化追踪。 10. **nextTick**：在下一个DOM更新循环结束后执行回调，确保数据更新后再执行操作。 11. **Vue模板编译原理**：将模板编译成渲染函数和 patch 函数，用于生成和更新DOM。 12. **v-for中key的作用**：key帮助Vue识别和跟踪每个节点的身份，提高DOM更新的效率。 13. **vue-router的hash模式与history模式**：hash模式利用URL的#部分进行路由，无需服务器配置；history模式需服务器配合，实现更友好的URL。 14. **Vue2.x与Vue3.x的差异**：Vue3引入Composition API，提高了代码复用性，更轻量级，优化了性能，支持TypeScript等。 **React篇** 1. **React技术栈的坑点**：如状态管理、生命周期方法的滥用、性能优化等。 2. **组件封装设计**：遵循单一职责原则，考虑可复用性和可维护性，利用props和state进行数据交互。 3. **虚拟DOM**：React通过虚拟DOM对比实际DOM，只更新必要的部分，提高性能。 4. **Hooks原理**：如useState、useEffect等，使得状态管理与函数组件解耦，避免类组件的复杂性。 5. **useState状态存储**：状态存储在组件实例的闭包中，每次setState更新状态并触发重新渲染。 6. **遍历DOM树**：通过递归遍历React元素树，访问每个节点。 7. **数据绑定优缺点**：双向绑定简化了数据同步，但可能造成数据流难以追踪；单向绑定使数据流清晰，易于调试。 8. **React Fiber**：React的更新调度机制，分片任务执行，提高UI更新的流畅性。 9. **React render目的**：用于生成虚拟DOM并进行比较，确定需要更新的实际DOM部分。 10. **setState后的变化**：setState可能异步执行，多个setState可能合并更新，最后触发一次re-render。 11. **React事件**：原生事件是浏览器自带的，React事件是合成事件，统一处理跨浏览器兼容性问题。 12. **高阶组件（HOC）**：高阶组件是一种函数，接受一个组件并返回一个新的组件，用于共享组件逻辑。 13. **Vue与React渲染器的diff算法**：Vue2.x使用了双端Diff，而Vue3.x采用Trie数据结构优化；React使用了Fiber结构的diff算法。 14. **React性能优化**：包括PureComponent、shouldComponentUpdate、React.memo、使用ref、按需加载组件等。 对于MVVM（Model-View-ViewModel）架构，它是一种用于构建用户界面的模式，Vue和Angular都是基于此理念。MVVM将视图和业务逻辑分离，ViewModel作为桥梁，实现了视图与数据模型的双向绑定。Vue的响应式系统就是基于MVVM模式实现的，它通过数据绑定让视图和模型保持同步，简化了开发者的工作。 Vue3.x的响应式原理主要基于ES6的Proxy和Reflect，提供了更高效的数据追踪和响应机制。与Vue2.x相比，Vue3.x在性能和API设计上有了显著改进，更利于大型项目开发。