Vue 2

Vue 2 的生命周期钩子有哪些？数据请求放在哪个钩子？

beforeCreate（创建前）、created（创建后）、beforeMount（挂载前）、mounted（挂载后）、 beforeUpdate（更新前）、updated（更新后）、activated（激活）、deactivated（停用）、beforeDestroy（消亡前）、destroyed（消亡后）

请求放在 mounted 里面，因为放在其他地方都不合适

Vue 2 组件间通信方式有哪些？

父子组件：使用「props 和事件」进行通信

爷孙组件：

• 使用两次父子组件间通信来实现
• 使用「provide + inject」来通信

任意组件：使用 eventBus = new Vue() 来通信

• 主要API 是 eventBus.$on 和 eventBus.$emit
• 缺点是事件多了就很乱，难以维护

任意组件：使用 Vuex 通信（Vue 3 可用 Pinia 代替 Vuex）

Vuex 用过吗？怎么理解？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库

• store 是个大容器，包含以下所有内容
• State 用来读取状态，带有一个 mapState 辅助函数
• Getter 用来读取派生状态，附有一个 mapGetters 辅助函数
• Mutation 用于同步提交状态变更，附有一个 mapMutations 辅助函数
• Action 用于异步变更状态，但它提交的是 mutation，而不是直接变更状态。
• Module 用来给 store 划分模块，方便维护代码

Mutation 和 Action 为什么要分开？
为了让代码更易于维护

VueRouter 用过吗？怎么理解？

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成， 让用 Vue.js 构建单页应用变得轻而易举。

router-link router-view 嵌套路由、Hash 模式 和 History 模式、导航守卫、懒加载

Hash 模式和 History 模式的区别？

• 一个用的 Hash，一个用的 History API
• 一个不需要后端 nginx 配合，一个需要

导航守卫如何实现登录控制？

router.beforeEach((to, from, next) => {
    if (to.path === '/login') return next()
    if (to是受控页面 && 没有登录) return next('/login')
    next()
})

Vue 2 是如何实现双向绑定的？

一般使用 v-model / .sync 实现，v-model 是 v-bind:value 和 von:input 的语法糖。

• v-bind:value 实现了 data ⇒ UI 的单向绑定
• v-on:input 实现了 UI ⇒ data 的单向绑定
• 加起来就是双向绑定了

这两个单向绑定是如何实现的呢？

• 前者通过 Object.defineProperty API 给 data 创建 getter 和 setter，用于监听data 的改变，data 一变就会安排改变 UI
• 后者通过 template compiler 给 DOM 添加事件监听，DOM input 的值变了就会去修改 data。