Vue3.0学习 - 第四节，Vue3 组合api composition api 和 vue2 option api 的混用

向右看齐 2023-01-12 15:52 115阅读 0赞

## setup 函数 ##

`setup` 函数的一些相关事项[官方文档][Link 1]

*  新的 `setup` 组件选项在**创建组件之前**执行

> 由于在执行 `setup` 时尚未创建组件实例，因此在 `setup` 选项中没有 `this`。这意味着，除了 `props` 之外，你将无法访问组件中声明的任何属性——**本地状态**、**计算属性**或**方法**。

就是说，`data`，`computed` 等自主定义的那些初始化数据都将会无法提供访问。

*  **在 `setup()` 内部，`this` 不会是该活跃实例的引用**，因为 `setup()` 是在解析其它组件选项之前被调用的，所以 `setup()` 内部的 `this` 的行为与其它选项中的 `this` 完全不同。这在和其它选项式 API 一起使用 `setup()` 时可能会导致混淆。

简单来说，就是在 `setup()` 中，`this` 指向 `undefined，因为`**setup函数，是在beforecreate钩子之前完成的**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

##  composition api + option api ##

`composition api` 和 `option api` 允许混用。`option api` 就是过去那种 data，computed 的 Vue2.x 函数定义方案。

混用代码大概长这样

<template>
      <div>
        <p>{
       { text1 }}</p>
        <button @click="myFun1">按钮1</button>
        <p>{
       { age }}</p>
        <button @click="myfun2">按钮2</button>
      </div>
    </template>
    
    <script>
    import { ref } from "vue";
    
    export default {
      name: "App",
      data() {
        return {
          text1: "option api",
        };
      },
      // setu函数是组合api的入口函数
      setup() {
        let age = ref(20);
        function myfun2() {
          alert("llooppp");
        }
        return { age, myfun2 };
      },
    
      components: {},
    
      methods: {
        myFun1() {
          alert("abcdefg");
        },
      },
    };
    </script>

这是一个 两个api 相互之间没有交互的示例，我们也可以让 `option api` 引用 `compostion api` 中的内容。

代码长这样

<template>
      <div>
        <p>{
       { text1 }}</p>
        <button @click="myFun1">按钮1</button>
        <p>{
       { age }}</p>
        <button @click="myfun2">按钮2</button>
      </div>
    </template>
    
    <script>
    import { ref } from "vue";
    
    export default {
      name: "App",
      data() {
        return {
          text1:  1,
        };
      },
      // setu函数是组合api的入口函数
      setup() {
        console.log("setUp函数被执行", this);
        let age = ref(20);
        function myfun2() {
            age.value+=1
        }
        return { age, myfun2 };
      },
      beforeCreate() {
        console.log("beforeCreate被执行", this);
      },
      created() {
        console.log("Create被执行", this);
      },
      components: {},
    
      methods: {
        myFun1() {
          this.age+=1
          this.text1 +=2
        },
      },
    };
    </script>

这个示例，在myfun1中使用composition api的age,这样点击 按钮1  的时候，两个数字都会变化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

点击 按钮1

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][]

**注意：**

*  **只有 `option api` 引用 `composition api` 的份，没有反过来的份；**
 *  **而且由于 `composition api` 立即执行并 return 的原因，它不被允许作为 `async` 异步函数进行定义，只能是同步不能是异步。**
 *  **setup函数无法使用data和methods，setup函数中this为undefined**

[Link 1]: https://dxmo.gitee.io/views/frontend/2020/Vue/Vue3-3.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221022/b879ee5a1f744eeeb0238d25b83a2b72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/aa1ac1d2fbaa49d8b7504bebd7894817.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/73ad9f25d0e5427f96f4e43f9d3e20c9.png