Vue面试复习

https://juejin.im/post/5e8f5c3c6fb9a03c6f66fb28
# VueX是什么?
为vue.js应用程序开发的**状态管理模式**。vuex 是一个状态管理模式


* state,驱动应用的数据源;
* view,以声明方式将 state 映射到视图;
* actions,响应在 view 上的用户输入导致的状态变化。
![](https://user-gold-cdn.xitu.io/2020/4/10/1716010dca30e154?w=1280&h=866&f=png&s=25103);


### 为什么要使用vuex?

>对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

>

![](https://user-gold-cdn.xitu.io/2020/4/7/17153cee622785f3?w=701&h=551&f=png&s=8112);

生命周期
beforeCreate, created, beformMount, mounted, beforeUpdaete, updated, beforeDestroy, destroyed.
keep-alive 生命周期钩子函数: activated, deactivated.
使用 `<keep-alive>` 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 ` activated `


# Vue Router

### [$router和$route的区别?](https://www.cnblogs.com/czy960731/p/9288830.html)
> router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

### [vue之this.$route.params和this.$route.query的区别?](https://www.cnblogs.com/happybread/p/10156869.html)
**1.this.$route.query的使用**

A、传参数:
```
this.$router.push({
path: '/monitor',
query:{
id:id,
}
})
```
B、获取参数:
this.$route.query.id
C、在url中形式(url中带参数)
http://172.19.186.224:8080/#/monitor?id=1
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据还会显示存在(项目中遇到此问题)

**2.this.$route.params的使用**
A、传参数:
```
this.$router.push({
name: 'monitor',
params:{
id:id,
}
})
```
B、获取参数:
this.$route.params.id
C、在url中形式(url中不带参数)
http://172.19.186.224:8080/#/monitor
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在(项目中遇到此问题)

原文地址:https://www.cnblogs.com/YangJonathan/p/12676751.html