vue3組合API注意點（系列三）

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 等自主定義的那些初始化數據都將會無法提供訪問。

2. 在 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>