組合式API的好處

1.更好的邏輯組織：

在選項式API中，組件邏輯是按照data、methods、computed、watch等分塊寫的，這種分離可能會導致相同功能的代碼分散在不同的部分。

組合式API 通過將相關的邏輯組合在一起，使代碼更加緊湊和清晰，尤其實在復雜組件中，組織代碼的方式更加自然。

2.更好的邏輯復用：

在選項式API中，如果要復用邏輯，通常使用mixin，但mixin存在作用域不清晰、命名沖突等問題。

組合式API提供了composable （可組合函數）的概念，運行將邏輯抽取成獨立的函數，這樣復用性更強、代碼更清晰。

3.更好的類型推斷支持：

組合式API更好地支持TypeScript，尤其是在函數內部可以更明確地推斷出數據和函數的類型，而不需要額外的類型定義。

4.更靈活的響應式系統(tǒng)：

組合式API 提供了更靈活的響應式系統(tǒng)，比如通過ref和reactive可以更直觀地控制響應式數據的行為。

Vue3有哪些生命周期？

• setup（）：開始創(chuàng)建組件，在beforeCreate  和  created 之前進行， 創(chuàng)建的是 data 和 method
• onBeforeMount（）：組件掛載到節(jié)點上之前執(zhí)行的函數
• onMounted（）：組件掛在完成后執(zhí)行的函數；
• onBeforeUpdate（）：組件更新之前執(zhí)行的函數；
• onUpdated（）：組件更新完成之后執(zhí)行的函數；
• onBeforeUnmount（）：組件卸載之前執(zhí)行的函數；
• onUnmounted（）：組件卸載完成后執(zhí)行的函數；
• onActived（）：被包含在<keep-alive>中的組件， 會多出兩個生命周期鉤子函數，被激活時執(zhí)行；
• onDeactivated（）：比如 A 組件切換到 B 組件，A組件消失時執(zhí)行；
• onErrorCaptured（）：當捕獲一個來自子孫組件的異常時激活鉤子函數。

Vue2.X 和 Vue3.X對比

vue2           ------->      vue3
 
beforeCreate   -------->      setup(()=>{})
created        -------->      setup(()=>{})
beforeMount    -------->      onBeforeMount(()=>{})
mounted        -------->      onMounted(()=>{})
beforeUpdate   -------->      onBeforeUpdate(()=>{})
updated        -------->      onUpdated(()=>{})
beforeDestroy  -------->      onBeforeUnmount(()=>{})
destroyed      -------->      onUnmounted(()=>{})
activated      -------->      onActivated(()=>{})
deactivated    -------->      onDeactivated(()=>{})
errorCaptured  -------->      onErrorCaptured(()=>{})

watch 和 watchEffect 的區(qū)別？

1.watch

watch用于監(jiān)聽特定響應式數據的變化，并在數據變化時執(zhí)行回調函數。下面是一個使用watch的例子：

import { ref, watch } from 'vue';
 
const count = ref(0);
 
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
  // 執(zhí)行一些副作用操作，例如發(fā)送API請求、更新其他狀態(tài)等
});
 
// 改變count值會觸發(fā)watch的回調
count.value++;

• watch接受兩個參數， 第一個參數是要監(jiān)聽的響應式值或計算屬性（可以是ref、reactive對象的屬性或者是computed的結果），第二個參數是回調函數。
• 回調函數會在監(jiān)聽的值發(fā)生變化時被調用，它會接收到新的值和舊的值作為參數。
• 如果你要深度監(jiān)聽對象或數組的變化， 可以為watch添加第三個參數，配置對象，如{deep：true}

2.watchEffect

watchEffect則是立即執(zhí)行并且持續(xù)監(jiān)聽其內部依賴變化的函數。每當其依賴的響應式值發(fā)生變化時，它都會重新執(zhí)行。

import { ref, watchEffect } from 'vue';
 
const count = ref(0);
const message = ref('Initial Message');
 
watchEffect(() => {
  console.log(`Count is ${count.value}, and message is ${message.value}`);
  // 根據count和message的值執(zhí)行一些副作用操作
});
 
// 改變count或message值都會觸發(fā)watchEffect的再次執(zhí)行
count.value++;
message.value = 'Updated Message';

詳細講解：

• watchEffect不需要指定監(jiān)聽的具體值，它會自動追蹤其內部表達式所涉及的所有響應式依賴。
• 當調用watchEffect時，它會立即執(zhí)行一次，并記錄下內部依賴的快照，此后每當依賴項變化時，它會再次執(zhí)行。
• 若想停止監(jiān)聽，可以返回一個清理函數，例如在組件卸載時清理副作用。

watch和watchEffect的對比

watch

• watch顯式指定依賴數據，依賴數據更新時執(zhí)行回調函數
• 具有一定的惰性lazy 第一次頁面展示的時候不會執(zhí)行，只有數據變化的時候才會執(zhí)行(設置immediate: true時可以變?yōu)榉嵌栊?，頁面首次加載就會執(zhí)行）
• 監(jiān)視ref定義的響應式數據時可以獲取到原值
• 既要指明監(jiān)視的屬性，也要指明監(jiān)視的回調

watchEffect

• watchEffect自動收集依賴數據，依賴數據更新時重新執(zhí)行自身
• 立即執(zhí)行，沒有惰性，頁面的首次加載就會執(zhí)行
• 無法獲取到原值，只能得到變化后的值
• 不用指明監(jiān)視哪個屬性，監(jiān)視的回調中用到哪個屬性就監(jiān)視哪個屬性

ref 與 reactive 的區(qū)別？

定義

reactive 和 ref 是 Vue 3 中的兩種響應式數據綁定方式，ref 適用于簡單的響應式數據，而 reactive 則適用于復雜對象或數組的響應式數據。

ref：用于聲明 基本類型 或者單個變量的響應式數據。

ref 的核心在于它包裝了一個值，當這個值變化時，依賴它的視圖會重新渲染。
注意：ref 返回的是一個對象，其中的值通過 .value 屬性訪問。

const count = ref(0);
console.log(count.value); // 0
count.value++;

reactive：用于聲明 對象 或 數組 的響應式數據。

reactive 更適合處理復雜的數據結構（對象或數組）。它返回的是一個響應式對象，直接操作對象的屬性時，視圖會自動更新。

const state = reactive({
  name: 'Vue',
  age: 3
});
console.log(state.name); // 'Vue'
state.age = 4; // 視圖會自動更新

主要區(qū)別如下：

1. 數據類型不同：

ref用于包裝JavaScript基本類型的數據（如字符串、數字、布爾值等），

而reactive可以用于包裝JavaScript對象和數組等復雜類型的數據。

2. 使用方式不同：

ref需要通過在模板中使用ref指令以及在JavaScript代碼中使用ref函數進行創(chuàng)建和使用，而reactive則需要通過調用Vue.js提供的reactive函數進行包裝和創(chuàng)建。

3. 訪問方式不同：

對于通過ref函數創(chuàng)建的響應式數據，我們可以通過.value屬性來訪問其實際值；而對于通過reactive函數創(chuàng)建的響應式對象，我們可以直接訪問其屬性或調用其方法。

4. 設計理念不同：

ref主要是為了解決單一元素/數據的響應式問題，而reactive則是為了解決JavaScript對象和數組等復雜數據結構的響應式問題

<script setup>

<script setup> 是 Vue 3 引入的一種新語法糖，它用于使用組合式 API 編寫組件。這種語法簡化了 Composition API 的使用，使得編寫和組織組件邏輯更加簡潔和直觀。

主要特點

• 聲明式：<script setup> 提供了一種聲明式的方式來使用組合式 API，減少了樣板代碼。
• 自動響應：在 <script setup> 中定義的響應式引用（如 ref 和 reactive）和函數自動暴露給模板，無需返回對象。
• 生命周期鉤子：生命周期鉤子（如 onMounted、onUpdated 等）可以直接導入和使用，無需定義匿名函數。
• 模塊作用域：在 <script setup> 中導入的變量和函數自動擁有模塊作用域，減少了全局命名沖突。

基本用法

<script setup>
import { ref, computed, onMounted } from 'vue';

const count = ref(0);
const doubledCount = computed(() => count.value * 2);

onMounted(() => {
  console.log('Component is mounted');
});

function increment() {
  count.value++;
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled Count: {{ doubledCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

與 <script> 的區(qū)別

• 無需返回對象：在 <script setup> 中，你不需要返回一個對象來暴露響應式狀態(tài)、計算屬性和方法給模板。
• 更少的代碼：<script setup> 使得組件的編寫更加簡潔，減少了樣板代碼。

組件定義

在 <script setup> 中，你可以定義組件的響應式狀態(tài)、計算屬性、方法和生命周期鉤子，就像在 <script> 標簽中使用組合式 API 一樣，但是更加簡潔。

生命周期鉤子

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component is mounted');
});
</script>

到此這篇關于深入理解Vue3組合式API的文章就介紹到這了,更多相關Vue3組合式API內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論