提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue3组合API注意点（系列三）

Vue3API 系列 组合 注意
2023-09-11 14:20:08 时间
  1. 新的 setup 组件选项在创建组件之前执行。
  1.Composition API 和Option API(vue2.x)混合使用
  2.Composition API本质 (组合API/注入API)
  3.setup执行时机
  4.setup注意点
 1.setup执行时机
  beforeCreate: 表示组件刚刚被创建出来, 组件的data和methods还没有初始化好
  setup
  Created     : 表示组件刚刚被创建出来, 并且组件的data和methods已经初始化好

  2.setup注意点
  - 由于在执行setup函数的时候, 还没有执行Created生命周期方法
    所以在setup函数中,是无法使用data和methods
  - 由于我们不能在setup函数中使用data和methods,
    所以Vue为了避免我们错误的使用, 它直接将setup函数中this修改成了undefined
  - setup函数只能是同步的不能是异步的

 

WARNING

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

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

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

    简单来说，就是在 setup() 中，this 指向 undefined 。

#composition api + option api

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

混用示例如下。

<template>
<div>
  <p>{{msg1}}</p>
  <button @click="c1">button1</button>
  <p>{{msg2}}</p>
  <button @click="c2">button2</button>
</div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  name: 'App',
  data() {
    return {
      msg1: 0
    }
  },
  methods: {
    c1() {
      this.msg1 ++;
    }
  },
  setup() {
    let msg2 = ref(0);
    function c2() {
      msg2.value ++;
    }
    return {
      msg2,
      c2
    };
  }
}

</script>

 

 

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

<template>
<div>
  <p>{{msg1}}</p>
  <button @click="c1">button1</button>
  <p>{{msg2}}</p>
  <button @click="c2">button2</button>
</div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  name: 'App',
  data() {
    return {
      msg1: 0
    }
  },
  methods: {
    c1() {
      this.msg1 ++;
      this.msg2 --;
    }
  },
  setup() {
    let msg2 = ref(0);
    function c2() {
      msg2.value ++;
    }
    return {
      msg2,
      c2
    };
  }
}

</script>
 

这个示例我在 methods 的 c1 中使用了 composition api 的 msg2 ，这样你点按 button1 的时候，两个数字都会发生变化。

记得，只有 option api 引用 composition api 的份，没有反过来的份。

而且由于 composition api 立即执行并 return 的原因，它不被允许作为 async 异步函数进行定义。

<template>
  <div>
    <p>{{name}}</p>
    <button @click="myFn1">按钮</button>
    <p>{{age}}</p>
    <button @click="myFn2">按钮</button>
  </div>
</template>

<script>
  /*
  1.setup执行时机
  beforeCreate: 表示组件刚刚被创建出来, 组件的data和methods还没有初始化好
  setup
  Created     : 表示组件刚刚被创建出来, 并且组件的data和methods已经初始化好

  2.setup注意点
  - 由于在执行setup函数的时候, 还没有执行Created生命周期方法
    所以在setup函数中,是无法使用data和methods
  - 由于我们不能在setup函数中使用data和methods,
    所以Vue为了避免我们错误的使用, 它直接将setup函数中this修改成了undefined
  - setup函数只能是同步的不能是异步的
  * */
  import {ref} from 'vue';
export default {
  name: 'App',
  data: function(){
    return {
      name: 'lnj',
    }
  },
  methods:{
    myFn1(){
      alert('abc');
    },
  },
  // async setup() {
  setup() {
    let age = ref(18);
    function myFn2() {
      alert('www.it666.com');
    }

    // console.log(this); // undefined
    // console.log(this.name);
    // this.myFn1();
    return {age, myFn2}
  }
}
</script>

<style>

</style>

 

相关文章