vue3中的setup函數如何使用

Vue3中的setup函數如何使用

Vue3引入了Composition API，其中setup函數是Composition API的核心部分。setup函數在組件實例創建之前執行，用于替代Vue2中的data、methods、computed等選項。本文將詳細介紹setup函數的使用方法。

1. setup函數的基本用法

setup函數是Vue3組件中的一個新的生命周期鉤子，它在組件實例創建之前執行。setup函數接收兩個參數：

• props：組件的props對象。
• context：包含attrs、slots、emit等屬性的上下文對象。

setup函數返回一個對象，該對象的屬性將暴露給模板使用。

import { ref } from 'vue';

export default {
  props: {
    message: String
  },
  setup(props, context) {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

在上面的例子中，setup函數返回了一個包含count和increment的對象，這些屬性和方法可以在模板中直接使用。

2. 響應式數據

在setup函數中，可以使用ref和reactive來創建響應式數據。

2.1 ref

ref用于創建一個響應式的引用值，通常用于基本類型的數據（如String、Number、Boolean等）。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count
    };
  }
};

在模板中使用count時，需要通過count.value來訪問其值。

2.2 reactive

reactive用于創建一個響應式的對象，通常用于復雜類型的數據（如Object、Array等）。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello Vue3'
    });

    return {
      state
    };
  }
};

在模板中可以直接訪問state對象的屬性。

3. 生命周期鉤子

在setup函數中，可以使用onMounted、onUpdated、onUnmounted等生命周期鉤子。

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });

    onUnmounted(() => {
      console.log('Component is unmounted!');
    });
  }
};

4. watch和computed

在setup函數中，可以使用watch和computed來監聽數據變化和計算屬性。

4.1 watch

watch用于監聽響應式數據的變化。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count
    };
  }
};

4.2 computed

computed用于創建計算屬性。

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
};

5. emit事件

在setup函數中，可以使用context.emit來觸發自定義事件。

export default {
  setup(props, context) {
    function handleClick() {
      context.emit('custom-event', 'Hello from child');
    }

    return {
      handleClick
    };
  }
};

在父組件中監聽custom-event事件即可接收到子組件傳遞的數據。

6. 總結

setup函數是Vue3中Composition API的核心，它提供了一種更靈活的方式來組織組件的邏輯。通過setup函數，我們可以更方便地管理響應式數據、生命周期鉤子、計算屬性、監聽器等。掌握setup函數的使用，能夠幫助我們編寫更加模塊化和可維護的Vue3組件。