【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代码

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>

</style>

HelloWorld.vue代码

<template>
  <div class="hello">
    <div>姓名：{{state.name}}</div>
    <div>年龄：{{state.age}}岁</div>
    <div>描述：{{state.secret}}</div>

    <button @click="growUp">年龄+1</button>

    <table border="1" cellpadding="0" cellspacing="0">
      <tr>
        <th>用户名</th>
        <th>邮箱</th>
        <th>电话</th>
      </tr>
      <tr
        v-for="(user, index) in state.users"
        :key="index"
      >
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.phone}}</td>
      </tr>
</table>
  </div>
</template>

<script>
import { reactive, computed, onMounted } from "vue";
import axios from 'axios';

export default {
  setup() {
    const state = reactive({
      name: "狗林哥",
      age: 45,
      secret: '头上其实是假发',
      users: []
    });

    function growUp() {
      state.age++;
    }

    function fetchUserInfo() {
      axios.get("http://jsonplaceholder.typicode.com/users")
      .then(res => {
        console.log(res);
        state.users = res.data;
      })
      .catch(err => {
        console.log(err);
      })
    }

    // 生命周期钩子函数
    onMounted(() => {
      fetchUserInfo();
    });

    return {
      state,
      growUp
    }
  }
}
</script>

<style scoped>

</style>