官方资料包：

| |

以下是一则充满焦虑的新闻

1、准备工作

Vue-cli版本：

cli 版本只要在 以上即可。

2、创建项目

运行以下命令来创建一个新项目：

vue create projectName

projectName 是项目名，自行命名。

项目只用了

创建出来是一个 本的项目。

要使用测试版的话，还需要在项目里装一个插件，使用以下命令：

vue add vue-next

升级完，vue的版本就变成。

运行 就能把项目跑起来了。

3、新语法

3.1 小变化

先看看 的一些小变化～

3.2 尝鲜

3.2.1 目录结构

3.2.2 初始化组件

在 组件。

我把 里添加里下面这句代码。

import { reactive, computed } from "vue";

3.2.3 启动函数

组件的启动函数需要用到 这两个生命周期钩子函数。

以下是官方文档的介绍

在 的概率比较低。所以有可能会把这两个函数合成一个使用～

从文档可以看出 这个钩子。

里用到的数据和方法返回(在3.2.4会看到)。

3.2.4 state

。

3.2.5 添加事件

添加一个点击事件，每点击一下，狗林哥的年龄就加1。

效果图

不管狗林哥多大，都完全没有报错。

3.2.6 使用axios

场景描述：通过 请求一段数据下来，并渲染在表格里。

根据这个需求，就需要使用另一个生命周期函数。这里使用里

首先使用以下代码在项目中安装 。

npm install axios

在组件中引入 。

import axios from 'axios';

在组件中引入所需的钩子函数，这里使用了

import { reactive, computed, onMounted } from "vue";

最终效果

4、贴代码

代码

代码