VueX是什么？

为vue.js应用程序开发的状态管理模式。vuex 是一个状态管理模式

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
;

为什么要使用vuex?

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

;

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

Vue Router

$router和$route的区别？

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

vue之this.$route.params和this.$route.query的区别？

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、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在（项目中遇到此问题）

什么是XSS攻击？如何防范XSS攻击？

简单来讲当我们在写一篇博客，如果我们输入的并不是正常的文字，图片等。而是一段恶意的js脚本。例如获取document.cookie 然后传输到自己的服务器上，那么当我们的文章被人浏览，或者评论时，那么这段js代码就被执行了，一旦执行，那便不受控制，因为它和原网页的代码有相同的权限，可以获取server端数据、本地cookie. 解决办法把< 替换成替换为 &lt；

CSRF(Cross-site request forgery, 跨域请求伪造)
XSS（CRoss Site Scripting, 跨站脚本攻击）

什么是回流和重绘

首先我们要了解浏览器的渲染过程是由 DomTree + CssTree 生成RenderTree

www.zhangxinxu.com/wordpress/2…

回流：我们需要遍历RenderTree 通过viewport 宽度大小，一步步去确定每一个节点的位置和大小。
重绘：通过构造渲染树，和回流后。我们知道哪些节点是可见的，以及可见节点的大小和位置。那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个过程叫做重绘。

注意：回流一定会触发重绘，而重绘不一定会回流

vue中mode hash 和 history的区别

vue父子组件加载顺序

一、加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

二、子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

三、父组件更新过程

父beforeUpdate->父updated 四、销毁过程父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

2020面试总结