Vue3從入門到精通(三)-有解無憂

vue3插槽Slots

在 Vue3 中，插槽（Slots）的使用方式與 Vue2 中基本相同，但有一些細微的差異，以下是在 Vue3 中使用插槽的示例：

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <slot></slot>
  </div>
</template>
?
// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent>
      <p>This is the content of the slot.</p>
    </ChildComponent>
  </div>
</template>
?
<script>
  import { defineComponent } from 'vue'
  import ChildComponent from './ChildComponent.vue'
?
  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    }
  })
</script>

在上面的示例中，ChildComponent 組件定義了一個默認插槽，使用 <slot></slot> 標簽來表示插槽的位置，在 ParentComponent 組件中，使用 <ChildComponent> 標簽包裹了一段內容 <p>This is the content of the slot.</p>，這段內容將被插入到 ChildComponent 組件的插槽位置，

需要注意的是，在 Vue3 中，默認插槽不再具有具名插槽的概念，如果需要使用具名插槽，可以使用 v-slot 指令，以下是一個示例：

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
?
// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent>
      <template v-slot:header>
        <h3>This is the header slot</h3>
      </template>
      <p>This is the content of the default slot.</p>
      <template v-slot:footer>
        <p>This is the footer slot</p>
      </template>
    </ChildComponent>
  </div>
</template>
?
<script>
  import { defineComponent } from 'vue'
  import ChildComponent from './ChildComponent.vue'
?
  export default defineComponent({
    name: 'ParentComponent',
    components: {
      ChildComponent
    }
  })
</script>

在上面的示例中，ChildComponent 組件定義了三個插槽，分別是名為 header、默認插槽和名為 footer 的插槽，在 ParentComponent 組件中，使用 <template v-slot:header> 來定義 header 插槽的內容，使用 <template v-slot:footer> 來定義 footer 插槽的內容，默認插槽可以直接寫在組件標簽內部，

需要注意的是，在 Vue3 中，v-slot 只能用在 <template> 標簽上，不能用在普通的 HTML 標簽上，如果要在普通 HTML 標簽上使用插槽，可以使用 v-slot 的縮寫語法 #，例如，<template v-slot:header> 可以簡寫為 #header，

vue3組件生命周期

在 Vue3 中，組件的生命周期鉤子函式與 Vue2 中有一些變化，以下是 Vue3 中常用的組件生命周期鉤子函式：

beforeCreate: 在實體初始化之后、資料觀測之前被呼叫，
created: 在實體創建完成之后被呼叫，此時，實體已完成資料觀測、屬性和方法的運算，但尚未掛載到 DOM 中，
beforeMount: 在掛載開始之前被呼叫，在此階段，模板已經編譯完成，但尚未將模板渲染到 DOM 中，
mounted: 在掛載完成之后被呼叫，此時，組件已經被掛載到 DOM 中，可以訪問到 DOM 元素，
beforeUpdate: 在資料更新之前被呼叫，在此階段，虛擬 DOM 已經重新渲染，并將計算得到的變化應用到真實 DOM 上，但尚未更新到視圖中，
updated: 在資料更新之后被呼叫，此時，組件已經更新到最新的狀態，DOM 也已經更新完成，
beforeUnmount: 在組件卸載之前被呼叫，在此階段，組件實體仍然可用，可以訪問到組件的資料和方法，
unmounted: 在組件卸載之后被呼叫，此時，組件實體已經被銷毀，無法再訪問到組件的資料和方法，

需要注意的是，Vue3 中移除了一些生命周期鉤子函式，如 beforeDestroy 和 destroyed，取而代之的是 beforeUnmount 和 unmounted，

另外，Vue3 中還引入了新的生命周期鉤子函式 onRenderTracked 和 onRenderTriggered，用于追蹤組件的渲染程序和觸發的依賴項，

需要注意的是，Vue3 推薦使用 Composition API 來撰寫組件邏輯，而不是依賴于生命周期鉤子函式，Composition API 提供了 setup 函式，用于組件的初始化和邏輯組織，在 setup 函式中，可以使用 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 等函式來替代相應的生命周期鉤子函式，

vue3生命周期應用

Vue3 的生命周期鉤子函式可以用于在組件的不同生命周期階段執行相應的操作，以下是一些 Vue3 生命周期的應用場景示例：

beforeCreate 和 created：在組件實體創建之前和創建之后執行一些初始化操作，如設定初始資料、進行異步請求等，

export default {
  beforeCreate() {
    console.log('beforeCreate hook');
    // 執行一些初始化操作
  },
  created() {
    console.log('created hook');
    // 執行一些初始化操作
  },
};

beforeMount 和 mounted：在組件掛載之前和掛載之后執行一些 DOM 操作，如獲取 DOM 元素、系結事件等，

export default {
  beforeMount() {
    console.log('beforeMount hook');
    // 執行一些 DOM 操作
  },
  mounted() {
    console.log('mounted hook');
    // 執行一些 DOM 操作
  },
};

beforeUpdate 和 updated：在組件資料更新之前和更新之后執行一些操作，如更新 DOM、發送請求等，

export default {
  beforeUpdate() {
    console.log('beforeUpdate hook');
    // 執行一些操作
  },
  updated() {
    console.log('updated hook');
    // 執行一些操作
  },
};

beforeUnmount 和 unmounted：在組件卸載之前和卸載之后執行一些清理操作，如取消訂閱、清除定時器等，

export default {
  beforeUnmount() {
    console.log('beforeUnmount hook');
    // 執行一些清理操作
  },
  unmounted() {
    console.log('unmounted hook');
    // 執行一些清理操作
  },
};

這些示例展示了 Vue3 生命周期鉤子函式的一些常見應用場景，根據具體需求，你可以在相應的生命周期鉤子函式中執行適當的操作，

vue3動態組件

在 Vue3 中，可以使用動態組件來根據不同的條件或狀態動態地渲染不同的組件，使用動態組件可以使應用更加靈活和可擴展，以下是使用動態組件的示例：

使用 component 元素和 :is 屬性來實作動態組件的渲染：

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>
?
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
?
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

在上面的示例中，根據 currentComponent 的值動態地渲染 ComponentA 或 ComponentB 組件，點擊按鈕時，切換 currentComponent 的值，從而實作動態組件的切換，

使用 v-if 和 v-else 來根據條件渲染不同的組件：

<template>
  <div>
    <component-a v-if="showComponentA"></component-a>
    <component-b v-else></component-b>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>
?
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
?
export default {
  data() {
    return {
      showComponentA: true,
    };
  },
  methods: {
    toggleComponent() {
      this.showComponentA = !this.showComponentA;
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

在上面的示例中，根據 showComponentA 的值使用 v-if 和 v-else 來渲染 ComponentA 或 ComponentB 組件，點擊按鈕時，切換 showComponentA 的值，從而實作動態組件的切換，

這些示例演示了在 Vue3 中如何使用動態組件來根據條件或狀態動態地渲染不同的組件，你可以根據具體需求選擇適合的方式來使用動態組件，

vue3組件保持存活

在 Vue3 中，可以使用 <keep-alive> 組件來保持組件的存活狀態，即使組件在組件樹中被切換或銷毀，它的狀態仍然會被保留，這對于需要在組件之間共享狀態或快取資料的場景非常有用，以下是使用 <keep-alive> 組件來保持組件存活的示例：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>
?
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
?
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

在上面的示例中，使用 <keep-alive> 組件將 <component> 包裹起來，這樣在切換組件時，被包裹的組件的狀態將會被保留，點擊按鈕時，切換 currentComponent 的值，從而切換要渲染的組件，

需要注意的是，被 <keep-alive> 包裹的組件在切換時會觸發一些特定的生命周期鉤子函式，如 activated 和 deactivated，你可以在這些鉤子函式中執行一些特定的操作，如獲取焦點、發送請求等，

<template>
  <div>
    <h2>Component A</h2>
  </div>
</template>
?
<script>
export default {
  activated() {
    console.log('Component A activated');
    // 執行一些操作
  },
  deactivated() {
    console.log('Component A deactivated');
    // 執行一些操作
  },
};
</script>

在上面的示例中，當組件 A 被激活或停用時，分別在 activated 和 deactivated 鉤子函式中輸出相應的資訊，

使用 <keep-alive> 組件可以方便地保持組件的存活狀態，并在組件之間共享狀態或快取資料，

vue3異步組件

在 Vue3 中，可以使用異步組件來延遲加載組件的代碼，從而提高應用的性能和加載速度，異步組件在需要時才會被加載，而不是在應用初始化時就加載所有組件的代碼，以下是使用異步組件的示例：

使用 defineAsyncComponent 函式來定義異步組件：

<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <component v-if="isComponentLoaded" :is="component"></component>
  </div>
</template>
?
<script>
import { defineAsyncComponent } from 'vue';
?
const AsyncComponent = defineAsyncComponent(() =>
  import('./Component.vue')
);
?
export default {
  data() {
    return {
      isComponentLoaded: false,
      component: null,
    };
  },
  methods: {
    loadComponent() {
      this.isComponentLoaded = true;
      this.component = AsyncComponent;
    },
  },
};
</script>

在上面的示例中，使用 defineAsyncComponent 函式來定義異步組件 AsyncComponent，當點擊按鈕時，設定 isComponentLoaded 為 true，并將 component 設定為 AsyncComponent，從而加載異步組件，

使用 Suspense 組件來處理異步組件的加載狀態：

<template>
  <div>
    <Suspense>
      <template #default>
        <component :is="component"></component>
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
    <button @click="loadComponent">Load Component</button>
  </div>
</template>
?
<script>
import { defineAsyncComponent, Suspense } from 'vue';
?
const AsyncComponent = defineAsyncComponent(() =>
  import('./Component.vue')
);
?
export default {
  data() {
    return {
      component: null,
    };
  },
  methods: {
    loadComponent() {
      this.component = AsyncComponent;
    },
  },
};
</script>

在上面的示例中，使用 Suspense 組件來處理異步組件的加載狀態，在 default 插槽中，渲染異步組件，而在 fallback 插槽中，渲染加載狀態的提示資訊，當點擊按鈕時，加載異步組件，

這些示例演示了在 Vue3 中如何使用異步組件來延遲加載組件的代碼，使用異步組件可以提高應用的性能和加載速度，特別是在應用中有大量組件時，

vue3依賴注入

在 Vue3 中，可以使用依賴注入來在組件之間共享資料或功能，Vue3 提供了 provide 和 inject 兩個函式來實作依賴注入，

使用 provide 函式在父組件中提供資料或功能：

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>
?
<script>
import { provide } from 'vue';
import MyService from './MyService';
?
export default {
  setup() {
    provide('myService', new MyService());
  },
};
</script>

在上面的示例中，使用 provide 函式在父組件中提供了一個名為 myService 的資料或功能，它的值是一個 MyService 的實體，

使用 inject 函式在子組件中注入提供的資料或功能：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
?
<script>
import { inject } from 'vue';
?
export default {
  setup() {
    const myService = inject('myService');
    const message = myService.getMessage();
?
    return {
      message,
    };
  },
};
</script>

在上面的示例中，使用 inject 函式在子組件中注入了父組件提供的名為 myService 的資料或功能，通過注入的 myService 實體，可以呼叫其中的方法或訪問其中的屬性，

通過使用 provide 和 inject 函式，可以在組件之間實作依賴注入，從而實作資料或功能的共享，這在多個組件需要訪問相同的資料或功能時非常有用，

vue3應用

Vue3 是一個用于構建用戶界面的現代化 JavaScript 框架，它具有回應式資料系結、組件化、虛擬 DOM 等特性，使得開發者可以更高效地構建互動式的 Web 應用，

下面是一些使用 Vue3 開發應用的步驟：

安裝 Vue3：使用 npm 或 yarn 安裝 Vue3 的最新版本，

npm install vue@next

創建 Vue3 應用：創建一個新的 Vue3 專案，

vue create my-app

撰寫組件：在 src 目錄下創建組件檔案，例如 HelloWorld.vue，

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
?
<script>
import { ref } from 'vue';
?
export default {
  setup() {
    const message = ref('Hello, Vue3!');
?
    const changeMessage = () => {
      message.value = 'https://www.cnblogs.com/for-easy-fast/archive/2023/06/30/Hello, World!';
    };
?
    return {
      message,
      changeMessage,
    };
  },
};
</script>

在上面的示例中，使用 ref 函式創建了一個回應式的資料 message，并在模板中使用它，通過點擊按鈕，可以改變 message 的值，

使用組件：在 App.vue 中使用自定義的組件，

<template>
  <div>
    <HelloWorld></HelloWorld>
  </div>
</template>
?
<script>
import HelloWorld from './components/HelloWorld.vue';
?
export default {
  components: {
    HelloWorld,
  },
};
</script>

在上面的示例中，匯入并注冊了自定義的 HelloWorld 組件，并在模板中使用它，

運行應用：在命令列中運行以下命令啟動應用，

npm run serve

這將啟動開發服務器，并在瀏覽器中打開應用，

這只是一個簡單的示例，你可以根據實際需求撰寫更復雜的組件和應用邏輯，Vue3 還提供了許多其他功能和工具，如路由、狀態管理、單檔案組件等，以幫助你構建更強大的應用，

希望這個簡單的示例能幫助你入門 Vue3 應用的開發！

付費內容，請聯系本人QQ：1002453261

本文來自博客園，作者：明志德道，轉載請注明原文鏈接：https://www.cnblogs.com/for-easy-fast/p/17515670.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556385.html

標籤：其他

上一篇：記錄--寫一個高德地圖巡航功能的小DEMO

下一篇：返回列表