2023年Vue面试焦点：生命周期与watch、computed深度解析

Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、响应式数据绑定和简洁的API著称。在面试中，了解Vue的生命周期、组件通信、响应式原理等核心概念至关重要。以下是对Vue面试题中涉及知识点的详细解释： 1. **Watch与Computed的区别** - **Watch** 是用来监听特定数据的变化，每当被监视的数据发生变化时，就会执行相应的回调函数。Watch没有内置的缓存机制，每次数据变化都会触发执行。 - **Computed** 是计算属性，它基于它的依赖进行缓存，只有当依赖改变时，计算属性才会重新计算并更新。常用于创建基于现有数据的衍生值。 2. **Vue的生命周期** - **beforeCreate**：实例创建之初，data和methods尚未初始化。 - **created**：实例已创建，data和methods可访问，但模板还未编译。 - **beforeMount**：模板编译完成，但还未挂载到DOM。 - **mounted**：模板已挂载到DOM，可以进行DOM操作和发起异步请求。 - **beforeUpdate**：数据更新，但DOM还未更新，新数据已生效但界面未刷新。 - **updated**：数据和界面都已完成更新，可以获取到最新的DOM状态。 - **beforeDestroy**：实例即将销毁，仍可使用。 - **destroyed**：实例销毁，所有绑定解除，事件监听器移除，子组件也销毁。 3. **父组件和子组件生命周期钩子执行顺序** - 加载渲染：父组件的beforeCreate、created、beforeMount先执行，然后是子组件的beforeCreate、created、beforeMount，最后是子组件的mounted。 - 子组件更新：父组件beforeUpdate，子组件beforeUpdate、updated，然后是父组件updated。 - 父组件更新：仅父组件的beforeUpdate和updated。 - 销毁：父组件beforeDestroy，子组件beforeDestroy，然后是各自的destroyed。 4. **响应式系统** - Vue通过Object.defineProperty()实现数据响应化，当数据变化时，依赖该数据的视图会自动更新。 - 使用Vue.set()或$set()添加新属性以保持响应性。 - 使用Vue.nextTick()在数据变化后异步更新DOM。 5. **组件通信** - Props（属性）向下传递数据，子组件通过props接收父组件的数据。 - $emit() 用于子组件向父组件发送事件，父组件通过事件监听器接收。 -Vuex：大型项目中管理组件间共享状态的工具。 - Event Bus：轻量级的事件中心，适用于简单的父子组件间通信。 6. **虚拟DOM** - Vue使用虚拟DOM来提高性能，通过比较新旧虚拟DOM树，找出最小变更来更新实际DOM，减少DOM操作。 7. **路由（Vuex Router）** - 负责页面跳转和导航，处理动态路由、命名路由、路由守卫等。 8. **插槽（Slot）** - 用于组件间的自定义内容分发，提供了一种将内容插入到组件模板中的方式。 9. **过滤器（Filter）** - 用于数据格式化，例如日期格式化、金额转换等。 10. **混入（Mixins）** - 允许将一些通用功能混合到多个组件中，避免代码重复。 理解这些概念是Vue开发的基本功，它们涵盖了Vue开发中的主要方面，对于面试和实际开发都至关重要。