vue3.0混合API的使用(二)

vue2.x存在的问题

在vue2.x中，对一个功能模块的处理一般是将数据定义在data中，方法定义在methods。如果这个页面内容方法过多，就不太利于代码阅读和维护。

vue3.0推出使用混合API

在vue3.0中，可以使用setup函数，将变量和方法都写在这个函数中，还可以将这个功能模块抽离到另一个js文件中，增加了代码的可阅读性，让别人知道你这个js文件的作用。在后面可能出现bug，也有利于他人维护。

在使用setup函数时，先介绍2个新的属性ref和reactive。

ref：监听简单数据类型的改变。

reactive：监听符合类型数据的改变。

Demo

这里以一个展示用户、新增用户、删除用户为例

vue界面

<template>
  <div>
    <form>
      <input type="text" v-model="state2.users.id" />
      <input type="text" v-model="state2.users.name" />
      <input type="submit" @click="addUser" />
    </form>
    <ul v-for="(item, index) in state.userInfo" :key="index">
      <li @click="removeUser(index)">{{ item.id }}--{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive } from "vue";
import UserController from './UserController.js';
export default {
  setup() {
    let state = reactive({
      userInfo: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
      ],
    });
    let state2 = reactive({
      users: {
        id: "",
        name: "",
      },
    });
    let { removeUser, addUser } = UserController(state, state2);
    return { state, state2, removeUser, addUser };
  },
};
</script>

被单独抽离出的js文件(UserController)

function UserController(state, state2) {
    function removeUser(index) {
        state.userInfo = state.userInfo.filter((item, i) => i !== index);
    }
    function addUser(e) {
        e.preventDefault();
        const user = Object.assign({}, state2.users);
        state.userInfo.push(user);
        state2.users.id = "";
        state2.users.name = "";
    }
    return { removeUser, addUser };
}
export default UserController;

这样抽离出来后，阅读user相关功能模块就只需关注UserController这个js文件即可。

混合API实质

混合API实质其实也是将在setup中return的时候注入到data和methods中。

setup注意点

setup函数执行时机：setup是在beforecreate前插入，而data和methods是在created之后才挂载到vue实例中，因此在setup中是无法使用data和methods的。

setup函数中的this：因为无法使用data和methods所以setup为了避免错误使用this，直接将this赋undifined。

setup函数中无法使用异步函数，也就是无法在setup前面加入async。