【精品问答】前端面试手册之Vue篇

Vue基础篇：

1. v-show与v-if的区别，你是如何选择的？

   • v-show是通过修改元素的CSS display属性来控制其显示或隐藏，它始终会被渲染并保留在DOM中，只是切换可见性。
   • v-if则是条件渲染，只有在条件为真时才会渲染元素到DOM中。当条件变化时，会进行真实的DOM插入或移除。 选择时，如果元素频繁切换状态使用v-show以减少DOM操作；如果初始渲染时就不需要显示某些元素，则使用v-if以节省初始渲染资源。

2. methods、computed、watch三者的区别?

   • methods：用于定义可复用的方法，每次调用都会执行函数。
   • computed：计算属性，基于依赖进行缓存，只有当依赖数据变化时才会重新计算。
   • watch：监听特定数据的变化，并在变化时执行回调函数，适合处理异步操作或复杂逻辑。

3. Vue中自定义指令如何使用? 自定义指令通过Vue.directive(name, definition)定义，name是指令名，definition是一个对象包含指令生命周期钩子函数（如bind、update等）。使用时，在元素上添加v-directiveName属性。

4. Vue中创建组件的方式有哪些？

   • 全局注册：通过Vue.component('component-name', ComponentDefinition)
   • 局部注册：在Vue实例的components选项中定义组件。

5. Vue中过滤器如何使用? 过滤器通过管道符|使用，如{{ message | capitalize }}。定义过滤器使用Vue.filter(name, function)。

6. Vue如何实现父子组件传值、非父子组件传值（组件通信）?

   • 父子组件：父组件通过props向子组件传递数据，子组件通过$emit触发事件通知父组件。
   • 非父子组件：可以使用事件总线、Vuex状态管理或者通过提供一个全局事件中心来实现。

7. Vue中生命周期函数（钩子函数）? 包括但不限于：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated等。

8. 谈谈你对于Vue中单向数据流的理解？ Vue的数据流向主要从父组件到子组件，通过props传递，保证数据流向的清晰和可预测性，有助于理解和调试应用。

9. 请说下什么是动态组件，如何使用，以及keep-alive的作用？ 动态组件通过<component :is="currentComponent"></component>实现，其中currentComponent决定渲染哪个组件。keep-alive包裹动态组件，可以缓存不活动的组件实例，避免重复渲染。

10. 简述vuex的数据传递流程? Vuex使用单一状态树，数据流动遵循严格规则：Actions发起异步操作 -> Mutations同步更新状态 -> Getters获取派生状态。

11. Vue路由传值params和query的区别?

    • params：URL路径参数，必须在路由配置中声明，刷新页面不会丢失。
    • query：URL查询参数，不需要事先声明，类似于GET请求的查询字符串，刷新页面也不会丢失。

12. 在Vue中使用插件的步骤? 使用Vue插件需调用Vue.use(plugin)方法，通常在创建Vue实例之前完成。

13. vuex有哪几种属性 主要有state（存储数据）、mutations（改变状态）、actions（处理异步）、getters（计算属性）。

14. mixin和mixins的区别? 没有区别，mixin是单数形式，mixins是复数形式，表示可以同时混入多个对象。

Vue进阶篇内容较多，这里只列出部分概念的解答：

1. 响应式（双向数据绑定）的原理 Vue通过Object.defineProperty劫持数据的getter和setter，当数据变化时，发布者-订阅者模式通知视图更新。Vue 3开始引入Proxy代理对象，提供了更全面且性能更好的数据拦截方式。

2. 解决初始化页面卡顿 可以采用懒加载、分组件按需加载、优化图片资源等方式减轻首屏负担。

3. Object.defineProperty缺陷与Proxy对比 Object.defineProperty仅能劫持已存在的属性，新增属性需要手动设置监听；不支持数组的一些变异方法。而Proxy可以代理整个对象，包括不存在的属性访问和各种操作，功能更强大，但兼容性要求较高。

其余问题涉及较深的技术细节和理解，由于篇幅限制无法一一展开，但大致方向包括对Vue编译过程、虚拟DOM diff算法、MVVM设计模式的理解，以及Vue内部机制的探讨等。