【Vue3.0 Beta】尝鲜

关注

发布于: 2020 年 04 月 22 日

官方资料包：GitHub地址 | Vue3.0文档 | vue-cli插件文档(用于试用Vue 3 alpha)
﻿
以下是一则充满焦虑的新闻
﻿
1、准备工作﻿
Vue-cli版本：4.2.2
﻿
cli 版本只要在 3.x 以上即可。
﻿
2、创建项目﻿
运行以下命令来创建一个新项目：
vue create projectName
projectName 是项目名，自行命名。
﻿
项目只用了Babel
﻿
创建出来是一个 2.x版 本的项目。
﻿
要使用测试版的话，还需要在项目里装一个插件，使用以下命令：
vue add vue-next
﻿
﻿
升级完，vue的版本就变成^3.0.0-beta.1。
﻿
运行 npm run serve 就能把项目跑起来了。
﻿
3、新语法﻿
3.1 小变化先看看 3.0 的一些小变化～
﻿
在 main.js 的挂载方式不同了。
生命周期函数发生了一些变化（在3.2.3粗略提了一下）
﻿
3.2 尝鲜3.2.1 目录结构﻿
﻿
3.2.2 初始化组件﻿
App.vue
﻿
在 App.vue 里只引入里 `HelloWorld 组件。
我把 HelloWorld.vue 组件的内容清空掉，然后在 script 里添加里下面这句代码。
﻿
import { reactive, computed } from "vue";
﻿
﻿
3.2.3 启动函数﻿
组件的启动函数需要用到 setup()，这个函数相当于 2.x 版的 beforeCreate() 和 created() 这两个生命周期钩子函数。
以下是官方文档的介绍
﻿
在 2.x 版的 beforeCreate() 和 created() ,个人觉得这两个生命周期的时间节点比较接近，而且很多项目用 beforeCreate() 的概率比较低。所以有可能会把这两个函数合成一个使用～
﻿
从文档可以看出 3.0 版 中 setup() 的重要性。要想使用变量绑定元素上的内容等操作，都要使用 setup() 这个钩子。
﻿
setup() 函数需要在最后把HTML模板里用到的数据和方法返回(在3.2.4会看到)。
﻿
3.2.4 statestate 可以理解为在 2.x 版中的 data。在使用 state 时，需要用到(3.2.2)中引入的 reactive 。
﻿
3.2.5 添加事件添加一个点击事件，每点击一下，狗林哥的年龄就加1。
﻿
效果图
﻿
不管狗林哥多大，都完全没有报错。
﻿
3.2.6 使用axios﻿
场景描述：通过 axios 请求一段数据下来，并渲染在表格里。
根据这个需求，就需要使用另一个生命周期函数。这里使用里 onMounted
﻿
首先使用以下代码在项目中安装 axios 。
npm install axios
﻿
在组件中引入 axios。
import axios from 'axios';
﻿
在组件中引入所需的钩子函数，这里使用了 onMounted
import { reactive, computed, onMounted } from "vue";
﻿
﻿
最终效果
﻿
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>
﻿
﻿