系列文章目录
通过对前端vue框架的学习，掌握vue相关面试题。
文章目录
前言
基于vue3后台管理项目，学习vue3框架，重点知识，以及面试常见问题，记录，总结！
一、vue3
官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js
-
vue指令v-show和v-if区别
区别：
v-show会在 DOM 渲染中保留该元素
v-show仅切换了该元素上名为display的 CSS 属性，无论初始条件如何始终渲染。如果需要频繁切换，则使用
v-show较好如果在运行时绑定条件很少改变，则
v-if会更合适。 -
Vue和React区别
1.数据绑定：vue实现数据双向绑定，react数据流动是单向的；
2.virtual DOM 不一样：vue会跟踪每个组件的依赖关系，不需要重新渲染整个组件树，当 react应用状态被改变时，全部组件都会重新渲染。
3. state对象：vue中state对象不是必须的，数据由data属性在vue对象中管理，react中state对象是不可变的，需要使用setState方法更新状态。
4.写法不同：vue单文件组件格式，react 推荐JSX
-
描述下对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 -
双向数据绑定
-单向绑定：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 -
vue组件通信方式
1.父子组件通信
2.兄弟组件通信
3.祖孙、后代通信
4.非关系组件通信
二、vue-router
-
官网：Vue Router
-
url的构成：
一个url可以由七个部分构成：
1.协议部分（
http/https）2.域名部分（
www.baidu.com）3.端口部分（
:8000）4.虚拟目录部分（
/news/）5.文件部分（从域名后的最后一个“/”开始到“？”为止）
6.锚部分（从“#”开始到最后）
7.参数部分（从“？”开始到“#”为止）
-
路由的常见模式
hash模式 #：hash是通过浏览器提供的location API修改url，通过onhashchange方法监听hash改变；
history 模式，需要后端配合的模式，history通过浏览器提供的history.pushState或者history.replacestate修改url，通过popState事件监听url改变。
abstract 模式，非浏览器环境的模式
-
路由的基本使用
1.引入
vue-router，并使用Vue.use(VueRouter)2、定义路由数组，并将数组传入
VueRouter实例，并将实例暴露出去（export default router）3、将
VueRouter实例引入到main.js，并注册到根Vue实例上 -
导航守卫
导航守卫，监听每一个路由的跳转过程，主要用来通过跳转或取消的方式守卫导航
导航守卫分为三个部分：全局导航守卫 、路由独享的守卫、组件守卫
全局导航守卫
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 -
完整的导航解析流程
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
-
官网：Vuex 是什么？ | Vuex
-
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中可以异步更新状态。
-
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来监听状态的改变了。