前端知识点-vue篇（面试题）

 系列文章目录

通过对前端vue框架的学习，掌握vue相关面试题。

文章目录

• 系列文章目录
• 前言
• 一、vue3
• 二、vue-router
• 三、vuex
• 总结 

---

前言

基于vue3后台管理项目，学习vue3框架，重点知识，以及面试常见问题，记录，总结！

---

一、vue3

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1. vue指令v-show和v-if区别

   区别：

   v-show会在 DOM 渲染中保留该元素

   v-show 仅切换了该元素上名为 display 的 CSS 属性，无论初始条件如何始终渲染。

   如果需要频繁切换，则使用 v-show 较好

   如果在运行时绑定条件很少改变，则 v-if 会更合适。

2. Vue和React区别

   1.数据绑定：vue实现数据双向绑定，react数据流动是单向的；

   2.virtual DOM 不一样：vue会跟踪每个组件的依赖关系，不需要重新渲染整个组件树，当 react应用状态被改变时，全部组件都会重新渲染。

   3. state对象：vue中state对象不是必须的，数据由data属性在vue对象中管理，react中state对象是不可变的，需要使用setState方法更新状态。

   4.写法不同：vue单文件组件格式，react 推荐JSX

3. 描述下对vue生命周期的理解

   vue实例中从创建——>销毁

   1.创建  2.初始化数据  3.编译template  4.挂载DOM  5.渲染  6.更新渲染   7.卸载

   常见生命周期流程

   -beforeCreate：实例创建之初

   -created：组件已经创建完成，异步请求获取数据，dom并没有生成

   -beforeMount：组件挂载之前

   -mounted：组件挂载之后，异步请求获取 render dom更新 页面变化

   -beforeUpdate：数据发生变化，更新之前

   -beforeDestroy：实例销毁前

   -destroyed：销毁后

   -activated：keep-alive 组件激活

   -deactivated：keep-alive 组件停用

   -errorCaptured：捕获实例错误

   new Vue() const vm = new Vue(){} //创建空的实例对象
   init events lifecycle
   //beforeCreate
   init reactivity data injection methods
   //created
   option
   -yes
   -false el option vm.$mount(el)
   
   template
   -yes compile
   -no el outerHTML as template
   //beforeMount 此时模板已经编译好，但页面未更新
   vm.$el replace $el
   //mounted 在dom上进行渲染完成
   //beforeUpdate 
   VDOM re-render patch
   //updated
   //beforeDestroy
   data methods filter directive 可用
   //destroyed

4. 双向数据绑定

   -单向绑定：model -> view js model data view -> model

   三部分组成：

   1.数据层 model：存储数据及业务逻辑

   2.视图层 view：展示效果

   3.业务逻辑层 ：viewMode：数据 视图

   MVVM model viewMode view

   observer：对所有数据的属性进行监听

   compiler：更新

   new Vue()
   
   1.data Observer //响应式处理
   2.template //模板解析 动态绑定数据 {{}} -> data获取数据 与页面 view关联 ——compiler（编译）过程
   3.update watcher //触发监听器
   4. data Dep -> watcher ->update //data 变化找依赖 关联对应的 watcher 
   
   1.new MVVM()
   2.Observer:劫持监听所有属性，通知变化Dep ->Watcher ->视图更新 Update
   3.Compiler：订阅数据变化 Watcher
   

5. vue组件通信方式

   1.父子组件通信

   2.兄弟组件通信

   3.祖孙、后代通信

   4.非关系组件通信

二、vue-router

1. 官网：Vue Router

2. url的构成：

   一个url可以由七个部分构成：

   1.协议部分（http/https）

   2.域名部分（www.baidu.com）

   3.端口部分（:8000）

   4.虚拟目录部分（/news/）

   5.文件部分（从域名后的最后一个“/”开始到“？”为止）

   6.锚部分（从“#”开始到最后）

   7.参数部分（从“？”开始到“#”为止）

3. 路由的常见模式

   hash模式 #：hash是通过浏览器提供的location API修改url，通过onhashchange方法监听hash改变；

   history 模式，需要后端配合的模式，history通过浏览器提供的history.pushState或者history.replacestate修改url，通过popState事件监听url改变。

   abstract 模式，非浏览器环境的模式

4. 路由的基本使用

   1.引入vue-router，并使用Vue.use(VueRouter)

   2、定义路由数组，并将数组传入VueRouter实例，并将实例暴露出去（export default router）

   3、将VueRouter实例引入到main.js，并注册到根Vue实例上

5. 导航守卫

   导航守卫，监听每一个路由的跳转过程，主要用来通过跳转或取消的方式守卫导航

   导航守卫分为三个部分：全局导航守卫 、路由独享的守卫、组件守卫

   全局导航守卫 

   1.全局前置守卫 router.beforeEach,在路由跳转时回调！

   const router = new VueRouter({ ... })
   router.beforeEach((to, from, next) => {
     // ...
   })

   2.全局解析守卫 router.beforeResolve （在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用）

   3.全局后置钩子  router.afterEach （不会接受 next 函数也不会改变导航本身）

   路由导航守卫 （路由独享的守卫）路由配置上直接定义 beforeEnter 守卫

   组件守卫 在路由组件内直接定义 beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

6. 完整的导航解析流程

   1.导航被触发。

   2.在失活的组件里调用 beforeRouteLeave 守卫。

   3.调用全局的 beforeEach 守卫。

   4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

   5.在路由配置里调用 beforeEnter。

   6.解析异步路由组件。

   7.在被激活的组件里调用 beforeRouteEnter。

   8.调用全局的 beforeResolve 守卫 (2.5+)。

   9.导航被确认。

   10.调用全局的 afterEach 钩子。

   11.触发 DOM 更新。

   12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

三、vuex

1. 官网：Vuex 是什么？ | Vuex

2. vuex的作用和使用

   Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

   主要有以下API：

   //保存状态

   1.state：基本数据，需要定义，将组件中的一些状态放到state中

   2. getters

   //改变状态

   3. mutations：提交mutation，更改状态

   4. actions：通过提交mutation，更改状态（间接）

   
   5. module //用来组织整个应用的状态管理代码，使状态划分模块，更易于管理

   6. 辅助函数：mapState、mapGetters、mapMutations、mapActions

   7. createStore //创建状态管理对象

   mutation和action的区别？

   mutations不应该用于异步修改状态，因为这样做的话，Vuex是无法知道修改state.count的时机的，因为它是在异步回调里面指定的，因此Vuex无法在调试工具中打印出我们实际改变state的操作。而actions中可以异步更新状态。

3. vuex的工作原理？

   vuex的数据流向？vuex整个触发过程（actions，state，view）？

   Vuex的数据流是组件中触发action，action提交mutations，mutations修改states。 组件根据 states或getters来渲染页面。

   Vuex通过createStore创建了一个数据中心，然后通过发布-订阅模式来让订阅者监听到数据改变。

   Vuex的store注入 vue的实例组件的方式，是通过vue的 mixin机制，借助vue组件的生命周期钩子beforeCreate 完成的。这样Vue组件就能通过this.$store获取到store了。

   Vuex使用vue中的reactive方法将state设置为响应式，这样组件就可以通过computed来监听状态的改变了。