vue面试题整理

什么是SPA应用，SPA页面和传统页面有什么区别？

单页面应用，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转。

什么是vuex,vuerouter,如何避免vuex中的函数造成全局污染

vuex 为状态管理，它集中存储管理应用的所有组件的状态，可以理解成一个全局仓库。
VueRouter是路由（spa）单页面应用的方式
避免全局变量污染：1.唯一变量：将变量都挂载到同一个命名空间下 2.使用闭包

为什么通过vuex的mutation修改state中的参数就不会报错，而直接更改state中的参数就会报错（使用严格模式才报错）

原因：如果通过外部直接修改state，则没有执行 commit 函数，通过mutation修改state执行了commit函数，不执行commit函数_withCommitting不为true，则报出异常。
1.使用vuex修改state时，有两种方式：
（1）可以直接使用this.$store.变量=xxx；
（2）this. $store.dispatch、this. $store.commit;
2.异同点：
（1）共同点：能够修改state里的变量，并且是响应式的（能触发视图更新）
（2）不同点：若将vue创建store的时候传入strict true，开启严格模式，那么任何修改state的操作，只要不经过mutation函数就会报错

vue中使用插件的步骤？

安装：npm install xxx
引入： import ... from ...;
使用：Vue.use(xxx)

vue中引入组件有几种方式？简述步骤

两种：采用 ES6 的 import ... from ... 语法或 CommonJS 的 require() 方法引入组件

//方法一
import Calendar from "./calendar";
export default {
  name: "SymptomMain",
  components: {
    Calendar
  },
}

//方法二
export default {
//1.直接在components中写入子组件
components: {
    Calendar:require('./calendar.vue').default
  },
}

vue-router 有哪几种导航钩子

1.全局导航钩子：作用：跳转前进行判断拦截。
2.组件内的钩子；
3.单独路由独享组件
*全局导航钩子
router.beforeEach(to,from,next);
router.beforeResolve(to,from,next);
router.afterEach(to,from,next);
*组件内钩子
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
*单独路由独享组件
beforeEnter

NextTick是做什么的？

$nextTick是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的DOM。
场景：需要在视图更新之后，基于新的视图进行操作

vue中key的作用

key的作用主要是为了高效的更新虚拟DOM
** 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。
** 如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

keep-alive的了解

keep-alive是vue内置的一个组件，可以在组件切换时保留被包裹组件的状态，使其不被销毁，防止重复渲染dom

`$router` 和`$route`的区别

$router 为VueRouter实例，想要导航到不同的url，则使用 $router.push方法；
$route 为当前router跳转对象里面可以获取name、path、query、params等。

vuex有哪几种状态和属性

有五种，分别是 State、 Getter、Mutation 、Action、 Module （就是mapAction等）
vuex的流程
页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。
最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值