【 Vue 3.0 初探 】

我们都用脚手架进行初始化搭建，看看 vue2.0和vue3.0有什么区别

脚手架一键生成文件的区别：

1、入口文件的差别 ：

V2 ：

V3：

明显可见，vue 3.0 进行了初始化实例的优化,创建实例以及使用插件都采用连缀的写法，返回的是当前创建的实例对象。

2、路由的区别 ：

配置路由表对象，vue3.0和vue2.0没区别，区别在于router实例的创建方法。

V3

vue3.0中，不在再通过 new Router 来创建 router实例对象。而是通过 createRouter方法，来传入配置，进行创建。
其他的模板文件都是相同的。

路由跳转的方式：第一种用组件来进行跳转，vue3.0和vue2.0是没有区别的，但是编程式导航有区别的， 需要引入 一个函数，useRouter 类似 react 中的hooks

Vue3.0中的 Composition API

相比较于vue2.0中，将各个逻辑的代码分散在各个配置中，比如数据在data中，方法在methods中，计算属性在 compoted中，一旦项目结构复杂一点，当我们要找寻某一个逻辑的代码的时候，就异常的困难，因为他们分散在各个配置中，所以vue3.0就仿照react中的hooks的思想，创建了一套新的 composition API 来处理复杂的大项目。

Vue3.0中的生命周期和基本属性

vue3.0较vue2.0移除了 beforeCreate 和 created ，新增了一个setup( ) 的生命周期钩子函数,在这个钩子函数中，可以做created中能做的事情，比如初始化数据。这个钩子函数，要返回一个对象，该对象中的所有属性，都暴露给模板使用，使用的时候，不用加this。vue3.0使用composition API 来初始化数据。
1、定义属性：
vue3.0中定义状态有两种写法。第一种是从vue中结构出reactive函数，定义属性的时候，调用该函数，并且传入初始值，第二种是从vue解构出 ref ，定义属性的时候，调用该函数，并且传入初始值。

2、定义计算属性
在vue中结构出computed函数，在创建计算属性的时候，传入一个回调函数，在回调函数里面做计算操作，返回一个属性，即为计算属性的值。用过mobx的应该不难发现，mobx中的计算属性和这里的计算属性大同小异，其实这里的操作方式，就是源于mobx的思想。

3、订阅事件相关：
绑定事件和之前一样 用 @ 来绑定事件，不同的是事件声明，vue2.0是声明在methods中，vue3.0是直接声明在setup这个钩子函数中。然后最后return 暴露给模板使用。

这样写，相信大家都有疑问，每一个函数都要这样return，不是代码相对原来更复杂了吗？其实这样做是为了做抽离的优化。可以将处理同一个逻辑的state和function 从 组件中抽离出去，这就是 compostion API 的优美所在。

在组件中直接引入这个文件，代码一下就变得优美了起来。

4、vuex

V2：

V3：

在vue3.0中，有个明显的区别就是，不用在通过new vux.store 来创建 store 对象了。变成了 redux 类似的 createStore 方法来构建，而且 data 变成了函数，返回一个仓库状态。

那么在vue3.0中，是怎么调用 store 中的方法的呢 ？？ vue3.0 基于 react hooks 研发了一套新的函数，从 vuex中解构出来。

而且 访问到仓库中的数据的类型为proxy类型。

vue3.0中input框中数据的双向绑定 改为 v-model：value

5、生命周期函数
vue3.0中的声明周期函数，现在更改为 on 开头 ，而且 要 写在 setup 函数中。
6、属性监听：
在vue2.0中，数据监听使用 watch ，而在 vue3.0中，使用的是 watchEffect 函数 。参数是一个回调函数，当函数中用到的数据，发生改变的时候，会触发回调函数。相似与mobx中的autorun 函数。