Vue 3.0 "One Piece" 终于在9月18日正式发布了，新版的Vue中最重要的一些特性有：

• 性能得到了显著的提升；
• Composition API；
• 一个组件可以支持多个根元素；
• Tree shaking，当一些功能不用的时候就不会打包到最终的代码里；
• 新的组件：Fragment、Teleport、Suspense；

其中性能提升主要体现在：更新比vue2有1.3～2倍的提升、SSR有2～3倍的提升。

# 做一个验证

创建一个vue2项目和一个vue3项目, 分别加载有1万条数据点表格，点击shuffle按钮，打乱表格数据，计算更新时间，得到的结果如下：

# 什么是Vuex？

官网定义：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

这段话说明vuex有两个特点：集中管理、状态变化可以预测。 在介绍这两个特点之前，先了解下什么是状态，以及为什么要对状态进行管理。

• 状态是驱动应用的数据源。

  通俗的讲就是组件中绑定的数据。例如：导航控件绑定的菜单数据、控制导航展开或收拢的数据等等。

• 为什么要状态管理？

  既然状态是组件需要绑定的数据，那为什么不直接写在组件的data方法里呢？当这个状态只在一个组件中使用时，当然直接在data中定义就可以。但是当多个组件都依赖同一个状态或者都会修改同一个状态时，处理起来就比较麻烦。

  因为在vue中，组件通过prop注册自定义属性。父组件通过给子组件的自定义属性赋值将数据传给子组件。另外子组件不能直接修改父组件的数据，它可以emit一个事件，将变更后的数据通过事件参数传给父组件，父组件捕获到事件后更新数据。 这样的话对下面这些场景处理起来就很麻烦：

  1. 两个兄弟关系（或者毫无关系）的组件都依赖于同一个状态，A组件修改状态后，B组件也要更新；此时A组件无法把修改后的状态传给B。
  2. 祖先向后代组件传递数据； 需要通过prop一层层的的传递，非常繁琐。