vue面试总结

vue

---

​ 渐进式-可以在单个页面单独使用vue，只需要引入vue就行。

​ 使用虚拟dom，减少性能消耗。

​ 响应性-数据变化能在视图响应（通过Object.defindproperty实现数据更新并在视图响应）

​ 组件化，万物皆组件，其实每一个.vue都是一个个组件，页面是通过一个个组件拼接起来的。（组件间的传值遵循单项数据流）

生命周期

---

​ beforeCreate - 实例初始化完成后

​ created - 实例创建完成后

​ beforeMount - 挂载开始前

​ mounted - 挂载到实例后

​ beforeUpdate - 数据更新时

​ updated - 数据更新，虚拟dom重新渲染后

​ beforeDestroy - 实例销毁前调用

​ destroyed - 实例销毁后调用

组件间传值

---

父传子：

1. 通过参数传递，子组件在 props里面接收。

   （注意：遵循单项数据流，子组件不能直接更改props里面数据，只能通过通知父组件去修改）

2. provide和inject可以实现父组件个子及孙组件传值。（父组件把值放在provide里面，那么他的子孙组件动能通过inject获取到父组件给出的值，一般用于公共组件的开发）

3. vuex传值

子传父：

1. 通过派发事件方式 （子组件通过this.$emit(“事件名称”,要传的值)派发事件，父组件只需要@事件名称 就能接收到这个事件）
2. 总线模式（利用的是vue对象的$emit,$on来实现； $emit派发事件出来，在其他组件通过$on就能接收到）。

vuex

---

​ 全局状态管理模式。一些需要全局管理的状态可以放到vuex里面进行管理。

​ vuex是响应式的，当状态改变，会通知所有组件进行状态改变。

​ 不能直接修改状态，必须通过提交的方式修改。

1. State： 单一状态树 （全局状态都存放在这里）
2. Getter: 计算属性 （可以对state做修改以后的返回）
3. Mutation: 更改store状态的唯一方法就是提交mutation；（调用 commit）
4. Action： 一般异步操作在这里执行，也是通过提交mutation修改store状态（调用dispatch()）
5. Module：对管理的状态分模块（状态太多的话分模块好整理）

graph RL
subgraph 页面数据
	view(Vue Components)
end
subgraph vuex
	actions(Actions)
	mutations(Mutations)
	state(State)
end
view -->|Dispatch异步操作| actions
actions -->|Commit| mutations
view -->|Commit| mutations
mutations -->|Mutate| state
state -->|render| view

简化使用：

使用vuex的时候，当要在组件使用的时候，往往要先引入，然后就是在页面使用：

store.state.xxx,

store.getters.xxx,

store.commit(“xxx”,{})

store.dispatch(“xxx”,{});

使用 mapState，mapGetters，mapActions，mapMutations简化操作

import {mapState,mapGetters,mapActions,mapMutations} from “vuex”;

通过解构操作：

…mapState([“xxx”,“xxx”]);

…mapGetters([“xxx”,“xxx”]);

…mapActions([“xxx”,“xxx”]);

…mapMutations([“xxx”,“xxx”]);

然后就可以直接使用名为xxx的方法或属性。

vue-router

---

1. 路由hash模式和history模式：

   hash模式是页面中带#的，也是vue默认使用的模式。

   history模式类似于正常的页面路径。（一般使用该模式是因为页面带#感觉不规范，但也有问题存在，只要在history模式下，刷新页面是会出现404情况，因为该模式下，地址虽然变了，但是其实是没有请求后台该地址，刷新的时候浏览器去请求该地址就会返回404；解决方法是然后端将地址重定向到index页面就行了）

2. 路由传参：

   路径传参：(path: “/user/:id” 声明user/后面的为id,可以通过this.$route.params.id获取)；

   还可以通过路径上?a=111传参，但是获取方式要通过 this.$route.query.a获取

   跳转是传参：this.$router.push(name{:}^{\prime }pag{e}^{\prime },params:id:"xxx")，通过this.$route.params.id获取；

3. 路由守卫

   通过router.beforeEach注册一个全局前置守卫。

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

   to: 要跳转页面
   from: 来自哪个页面
   next: function 下一步。 带参数则指定跳转路径

axios

---

​ 是一个基于 promise 的 HTTP 库；

​ 请求方法：

​ axios.get(“url”,{params: data}).then(function(){}).catch(function(){})；

​ axios.post(“url”,data).then(function(){}).catch(function(){})；

​ axios.all([])类似于promise的all方法。

​ axios(config).then(function(){}).catch(function(){})。

element-ui

---

​ 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库；

​ github有 4万星。 pc端。饿了么公司团队开发的

mint-ui

---

​ 基于 Vue.js 的移动端组件库；

​ github有 1万星。 移动端。饿了么公司团队开发的

​ github有2万星。 pc端。饿了么公司团队开发的

iview

---

​ 一套基于 Vue.js 的高质量UI 组件库;