技術標籤：vue3vue

setup函式

setup()函式是compositionAPI統一入口，執行時間在生命週期的beforeCreate和created之間
這個東西沒弄懂`

<script>
// @ is an alias to /src

import { ref } from "vue";
export default {
  name: "Home",
  data() {
    return {
      // num: 123
    };
  },
  setup() {
    let num = ref(0);
    let
 
 numAdd = function() {
      ++num.value;
    };
    return { num, numAdd };
  },
  beforeCreate(){
    console.log(this.num,'beforeCreate');
  },
  created(){
    console.log(this.num,'created');
  },
  mounted() {
    console.log(this.num,'mounted');
  },
};
</script>

接收兩個引數（props、context），在使用setup()函式一定要return回去才能獲取到函式內部值！！！

composition API優勢

程式碼複用，目前使用我使用的都是混入（mixin）和插槽（v-slot）

mixin混入

import mixinIndex from './mixins/index'

export default {
  mixins: [mixinIndex]
}

不知道元件多了什麼東西和功能，還可能名字出現衝突 ，覆蓋的問題。

v-slot插槽

<template>
  <Counter v-slot="{ count, clickFn }">
     {{ count }}
    <button @click=
 
"clickFn">Increment</button> 
  </Counter> 
</template>

因為使用的是插槽，只能通過v-slot訪問對應屬性，這樣很容易理解程式碼，但是隻能在對應的範圍（如：counter元件）中使用。

composition API

//composition
import {ref} from 'vue'
function increase() {
	// 宣告響應式資料count，值為0
    const count = ref(0)
    // 建立方法add
    const add = () => {
        count.value ++
    }
    // 匯出資料和方法，便於外界訪問
    return {
        count,
        add
    }
}
export {increase}

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "vue";
import {increase} from '../compositon/index'
export default {
  name: "Home",
  data() {
    return {
      // num: 123
    };
  },
  setup() {
    const {count,add} = increase()
    console.log(count,add);
    return {count,add}
  },
  // console.log(this.num);

  methods: {
    // numAdd(){
    //   this.num+=1
    // }
  },
  beforeCreate(){
    console.log(this.count,'beforeCreate');
  },
  created(){
    console.log(this.count,'created');
  },
  mounted() {
    console.log(this.count,'mounted');
  },
  components: {
    HelloWorld,
  },
};
</script>

我們不受模板和元件範圍的限制，並且確切地知道我們訪問哪些屬性。