我们都用脚手架进行初始化搭建,看看 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 函数。