三、升级Vue3
虽然目前为止Vue3还未正式发布,但我们已经可以提前体验Vue3了,为了更好地进行版本的迭代更新,Vue3对Vue2进行了很大程度的兼容,并且还提供了一个版本升级工具,可以将原本的Vue2项目很好的升级到Vu3。接下来我给大家介绍一下升级Vue3的步骤
(1)创建Vue2项目
我们先通过 vue-cli
脚手架的 vue create 项目名
来创建一个 vue2项目,这里建议大家在创建时把 vue-router
和 vuex
一并安装上,因为等会在升级时,会把这两个一并升级,因此代码会有所变化。
(2)将Vue2升级成Vue3
那么我们现在只需要在原来的 vue项目目录下通过命令 vue add vue-next
来将Vue2升级成Vue3
在升级之前,我先记录一下几个文件的代码,可以方便我们看看升级前和升级后的差别
- Vue2的
main.js
文件
- Vue2的
vue-router
的index.js
文件
- Vue2的
vuex
的index.js
文件
稍微等待一下,Vue3就升级成功了,结果如图
那么此时我们来看看升级后的Vue文件有哪些变化
- Vue3的
main.js
文件
- Vue3的
vue-router
的index.js
文件
- Vue3的
vuex
的index.js
文件
对比一下各个文件升级前和升级后的区别,我们可以很明显地看到:
Vue2的文件中都是 import Vue from 'vue'
导入了整个Vue,也就是把所有的模块API都导入了,但是用到的API可能就那么几个,所以这非常影响性能
Vue3的文件都是将用到的Vue中的模块API单独地导出,而不是导入整个Vue,类似图中的 import { createApp } from 'vue'
,这样就跟吃自助时吃多少拿多少的道理一样,非常得节省代码性能的消耗。
到这里,Vue3就算已经升级成功了,接下来我们就来体验一下Vue3的一些新特性吧。
四、体验Vue3新特性
这里主要是来体验一下 Composition API
的,首先了解一下 Composition API
新特性的入口—— setup()
函数,该函数是为组件提供的新属性。
上面说了,这个API主要就是为了整合代码,使得为了实现相同功能的代码集中在一起便于维护查看,我们来用一个简单的例子来感受一下
我们要实现以下这个功能
首先看看在Vue2里是如何实现的
<template> <div> <div>{{ count }}</div> <button @click="add">增加</button> </div> </template> <script> export default { name: "demo", data() { return { count: 0 } }, methods: { add() { this.count ++ } } } </script>
我们可以看到,首先数据 count
和 方法 add
是分开的,分别分布在 data
属性 和 methods
属性中的,这也就是证明了,实现一个功能时,代码是分开的,如果这个组件里有很多很多功能,就会比较难找了。
接下来我们再来看一下在Vue3中是如何实现这一功能的吧
<template> <div> <div>{{ count }}</div> <button @click="add">增加</button> </div> </template> <script> // 导入ref函数 import {ref} from 'vue' function increase() { // 声明响应式数据count,值为0 const count = ref(0) // 创建方法add const add = () => { count.value ++ } // 导出数据和方法,便于外界访问 return { count, add } } export default { name: 'demo', setup() { //调用increase函数,并获取 count 和 add let {count, add} = increase() //return出需要被访问的值和方法 return { count, add } } } </script>
Vue3中没有再使用 data
属性,而是通过使用vue中的 ref()
函数来命名响应式数据的,ref()
函数返回的是一个对象,我们命名的数据是存储在这个对象的 value
属性里的,如图
同样的也没有再使用 methods
属性,而是直接通过 function
命名一个函数即可
同时,为了让代码整合在一起,我们在最外部命名了一个 increase
函数,里面存放了所有的数据和方法。
在Vue3中有一个新的属性 setup()
,它可以看作是一个生命周期,介于 beforeCreate
与 created
之间,在这个生命周期内被 return
的值和方法可以被外界访问到
所以在代码中,我们直接调用了刚才将功能代码整合在一起的 inscrease
函数,同时获取了函数内 return
的两个变量,这是因为这两个变量是需要被访问的,例如 <div>{{ count }}</div>
中需要访问 count
;<button @click="add">增加</button>
中需要访问 add
方法。
不要看这一个简单的功能中,似乎Vue3显得更麻烦,其实在一个功能非常多的项目中,这样的逻辑方式会使代码阅读与维护起来非常的方便。
好了,Vue3的尝鲜就到这里了,但Vue3的功能和API远远不止这些,相信大家对Composition API
也有了深刻的印象,后面我会再出一篇博客来更详细地介绍这个API的更多用法,欢迎大家继续关注我~