Vue3?setup的注意點及watch的監視屬性有哪些

Vue3 Setup的注意點及Watch的監視屬性有哪些

Vue3 引入了 Composition API，其中最核心的部分是 setup 函數。setup 函數是 Vue3 組件邏輯的入口，它替代了 Vue2 中的 data、methods、computed 等選項。本文將探討 setup 函數的使用注意點，并詳細介紹 watch 的監視屬性。

一、Vue3 Setup 的注意點

1. setup 函數的執行時機

setup 函數在組件實例創建之前執行，因此它無法訪問 this。這意味著在 setup 中無法使用 this.$refs、this.$emit 等 Vue2 中常見的操作。取而代之的是，Vue3 提供了 ref、reactive、emit 等函數來處理這些邏輯。

2. setup 函數的返回值

setup 函數必須返回一個對象，該對象中的屬性和方法可以在模板中直接使用。例如：

import { ref } from 'vue';

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

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

    return {
      count,
      increment,
    };
  },
};

在上面的例子中，count 和 increment 可以在模板中直接使用。

3. setup 函數的參數

setup 函數接收兩個參數：props 和 context。

• props：組件的 props 對象，它是響應式的。
• context：包含 attrs、slots、emit 等屬性的上下文對象。

export default {
  props: {
    message: String,
  },
  setup(props, context) {
    console.log(props.message); // 訪問 props
    context.emit('custom-event'); // 觸發事件
  },
};

4. setup 函數中的生命周期鉤子

在 setup 函數中，可以使用 onMounted、onUpdated、onUnmounted 等生命周期鉤子函數。這些鉤子函數需要在 setup 中顯式導入并使用。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('組件已掛載');
    });
  },
};

5. setup 函數中的 ref 和 reactive

在 setup 中，通常使用 ref 和 reactive 來創建響應式數據。

• ref：用于創建基本類型的響應式數據，訪問時需要 .value。
• reactive：用于創建對象類型的響應式數據，訪問時不需要 .value。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({
      name: 'Vue3',
      version: '3.0.0',
    });

    return {
      count,
      state,
    };
  },
};

二、Watch 的監視屬性

watch 是 Vue3 中用于監聽響應式數據變化的函數。它可以監聽 ref、reactive、computed 等響應式數據的變化，并在變化時執行回調函數。

1. 基本用法

watch 的基本用法如下：

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`count 從 ${oldValue} 變為 ${newValue}`);
    });

    return {
      count,
    };
  },
};

在上面的例子中，watch 監聽 count 的變化，并在變化時執行回調函數。

2. 監聽多個數據源

watch 可以同時監聽多個數據源，只需將多個數據源放入數組中即可。

import { ref, watch } from 'vue';

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

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count 從 ${oldCount} 變為 ${newCount}`);
      console.log(`name 從 ${oldName} 變為 ${newName}`);
    });

    return {
      count,
      name,
    };
  },
};

3. 深度監聽

默認情況下，watch 是淺層監聽的，即它只監聽對象的第一層屬性變化。如果需要監聽對象內部屬性的變化，可以使用 deep 選項。

import { reactive, watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      user: {
        name: 'Vue3',
        age: 3,
      },
    });

    watch(
      () => state.user,
      (newValue, oldValue) => {
        console.log('user 對象發生變化');
      },
      { deep: true }
    );

    return {
      state,
    };
  },
};

4. 立即執行

默認情況下，watch 只有在監聽的數據發生變化時才會執行回調函數。如果希望在組件初始化時立即執行回調函數，可以使用 immediate 選項。

import { ref, watch } from 'vue';

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`count 從 ${oldValue} 變為 ${newValue}`);
      },
      { immediate: true }
    );

    return {
      count,
    };
  },
};

5. 監聽計算屬性

watch 也可以監聽計算屬性的變化。

import { ref, computed, watch } from 'vue';

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

    watch(doubleCount, (newValue, oldValue) => {
      console.log(`doubleCount 從 ${oldValue} 變為 ${newValue}`);
    });

    return {
      count,
      doubleCount,
    };
  },
};

三、總結

Vue3 的 setup 函數是 Composition API 的核心，它提供了更靈活的方式來組織組件的邏輯。在使用 setup 時，需要注意其執行時機、返回值、參數以及生命周期鉤子的使用。watch 是 Vue3 中用于監聽響應式數據變化的工具，它可以監聽單個或多個數據源的變化，并支持深度監聽和立即執行等選項。掌握這些知識點，可以幫助我們更好地使用 Vue3 開發高效、可維護的組件。