常见前端面试之VUE面试题汇总十一

31. Vuex 有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步

actions => 像一个装饰器，包裹 mutations，使之可以异步。

modules => 模块化 Vuex

32. Vuex 和单纯的全局对象有什么区别？

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的 时候，若 store 中的状态发生变化，那么相应的组件也会相应地得 到高效更新。

不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就 是显式地提交 (commit) mutation。这样可以方便地跟踪每一个状态 的变化，从而能够实现一些工具帮助更好地了解我们的应用。

33. 为什么 Vuex 的 mutation 中不能做异步操作？

Vuex 中所有的状态更新的唯一途径都是 mutation，异步操作通过 Action 来提交 mutation 实现，这样可以方便地跟踪每一个状态的 变化，从而能够实现一些工具帮助更好地了解我们的应用。

每个 mutation 执行完成后都会对应到一个新的状态变更，这样 devtools 就可以打个快照存下来，然后就可以实现 time-travel 了。

如果 mutation 支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

34. Vue3.0 有什么更新

（1）监测机制的改变

3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言覆盖的 反应性跟踪。

消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的 很多限制：

（2）只能监测属性，不能监测对象

检测属性的添加和删除；

检测数组索引和长度的变更；

支持 Map、Set、WeakMap 和 WeakSet。

（3）模板

作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重 新渲染，提升了渲染的性能。

同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来方 便习惯直接使用 api 来生成 vdom 。

（4）对象式的组件声明方式

vue2.x 中 的 组 件 是 通 过 声 明 的 方 式 传 入 一 系 列 option ， 和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功 能，但是比较麻烦。

3.0 修改了组件的声明方式，改成了类式的写法，这样使得和 TypeScript 的结合变得很容易

（5）其它方面的更改

支持自定义渲染器，从而使得 weex 可以通过自定义渲染器的方式来 扩展，而不是直接 fork 源码来改的方式。

支持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组 建内容）组件，针对一些特殊的场景做了处理。

基于 tree shaking 优化，提供了更多的内置功能。