常见基础问题（Vue2）

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

声明周期钩子

总共有11个。分别是

create *2 (beforeCreate ,created)

mount *2 (beforeMount ,mounted)

update *2 (beforeUpdate ,updated)

distory *2 (beforeDistory ,distoryed)

还有三个分别是

1. activated

2. deactivated

3. errorCaptured

数据请求放在mounted里

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

1. 父子间通信：使用props和事件进行通信。
2. 爷孙组件：
   • 使用两次父子组件通信。
   • 使用provide 和 inject来通信。
3. 任意组件：使用eventBus = new Vue()来通信。
   • 主要api是eventBus.$on和eventBus.$emit，缺点是事件多了就会很混乱，难以维护。
4. 任意组件：使用Vuex通信。（Vue3使用Pinia代替Vuex）

Vuex 用过吗？怎么理解？

1. Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。
2. 主要有store,State,Getter,Mutation,Action,Module
   • store:是个大容器，包含其他的内容。
   • State：用来读取状态，带有一个mapState辅助函数。
   • Getter：用来读取计算状态，带有一个mapGetters辅助函数。
   • Mutation:用于同步提交状态变更，带有一个mapMutations的辅助函数。
   • Action：用于异步变更状态，但提交的也是mutation，而不是直接变更状态。
   • Module：用于给store划分模块，方便维护代码。

w为什么Mutation,Action要分开？

为了让代码更易于维护。

为什么Pinia合并了Mutation,Action？

为了让代码更简化，容易理解。

VueRouter 用过吗？怎么理解？

1. VueRouter是Vue.js的官方路由，适用于构建单页面应用。

2. 包含有router-link,router-view,嵌套路由、Hash模式和History模式、导航守卫、懒加载等。
   记得熟悉这些概念。

追问

• Hash模式和History模式的区别？ 一个用Hash,不需要后端nginx配合；一个用History API，需要后端配合。

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

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

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

1. 一般使用v-model实现（.sync也可以）。v-model是v-bind:value 和 v-on:input的语法糖。

• v-bind:value实现了data => UI 的单向绑定。
• v-on:input实现了 UI => data 的单向绑定。

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

• v-bind:value通过Object.defineProperty API 给data创建getter 和 setter，用于监听data的改变，data一变就会安排改变UI。
• v-on:input通过template complier 给 DOM 添加事件监听，DOM input 的值变了就会去修改data。