【Vue3.0 Beta】尝鲜
微信订阅号:Rabbit_svip
官方资料包:GitHub地址 | Vue3.0文档 | vue-cli插件文档(用于试用Vue 3 alpha)
以下是一则充满焦虑的新闻
[图片上传失败...(image-bcb998-1587175081728)]
1、准备工作
Vue-cli版本:4.2.2
cli版本只要在3.x以上即可。
2、创建项目
运行以下命令来创建一个新项目:
vue create projectName
projectName 是项目名,自行命名。
项目只用了Babel
[图片上传失败...(image-884bc9-1587175081728)]
创建出来是一个2.x版本的项目。
[图片上传失败...(image-6f9dc6-1587175081728)]
要使用测试版的话,还需要在项目里装一个插件,使用以下命令:
vue add vue-next
[图片上传失败...(image-607cd3-1587175081728)]
升级完,vue的版本就变成^3.0.0-beta.1。
运行 npm run serve就能把项目跑起来了。
3、新语法
3.1 小变化
先看看3.0的一些小变化~
[图片上传失败...(image-3e1b3e-1587175081728)]
在main.js的挂载方式不同了。
生命周期函数发生了一些变化(在3.2.3粗略提了一下)
3.2 尝鲜
3.2.1 目录结构
[图片上传失败...(image-570d32-1587175081728)]
3.2.2 初始化组件
App.vue
[图片上传失败...(image-f869f9-1587175081728)]
在 App.vue 里只引入里 HelloWorld 组件。
我把 HelloWorld.vue组件的内容清空掉,然后在script里添加里下面这句代码。
个人觉得,从这一步开始往下的操作,和React开始有点像了。
import { reactive, computed } from "vue";
[图片上传失败...(image-2b353d-1587175081728)]
3.2.3 启动函数
组件的启动函数需要用到 setup(),这个函数相当于2.x版的beforeCreate()和created()这两个生命周期钩子函数。
以下是官方文档的介绍
[图片上传失败...(image-20b209-1587175081728)]
在2.x版的beforeCreate()和created(),个人觉得这两个生命周期的时间节点比较接近,而且很多项目用beforeCreate()的概率比较低。所以有可能会把这两个函数合成一个使用~
从文档可以看出 3.0版 中 setup() 的重要性。要想使用变量绑定元素上的内容等操作,都要使用 setup() 这个钩子。
[图片上传失败...(image-703f3c-1587175081728)]
setup() 函数需要在最后把HTML模板里用到的数据和方法返回在3.2.4会看到(也就是下一节)。
3.2.4 state
state可以理解为在2.x版中的data。在使用state时,需要用到3.2.2中引入的reactive。
[图片上传失败...(image-a23b01-1587175081728)]
3.2.5 添加事件
添加一个点击事件,每点击一下,狗林哥的年龄就加1。
[图片上传失败...(image-796c2b-1587175081728)]
效果图
[图片上传失败...(image-c505a0-1587175081728)]
不管狗林哥多大,都完全没有报错。
3.2.6 使用axios
场景描述:通过axios请求一段数据下来,并渲染在表格里。
根据这个需求,就需要使用另一个生命周期函数。这里使用里onMounted
首先使用以下代码在项目中安装 axios 。
npm install axios
在组件中引入axios。
import axios from 'axios';
在组件中引入所需的钩子函数,这里使用了onMounted
import { reactive, computed, onMounted } from "vue";
[图片上传失败...(image-d9d5e2-1587175081728)]
最终效果
[图片上传失败...(image-1a528a-1587175081728)]
4、贴代码
App.vue代码
HelloWorld.vue代码
姓名:{{state.name}}
年龄:{{state.age}}岁
描述:{{state.secret}}
用户名 | 邮箱 | 电话 |
---|---|---|
{{user.name}} | {{user.email}} | {{user.phone}} |
发表评论 (审核通过后显示评论):