動態組件和異步組件 · vue筆記

[TOC] >[success] # 動態組件和異步組件本章講解 **動態組件** 與 **異步組件** 的使用方法 >[success] ## 動態組件 **動態組件** ： **根據數據的變化，結合?component?這和標簽，來隨時動態切換組件的顯示** 。 **需求** ：有兩個組件，一個 **input框** ，一個 **hello world** 文字，想實現效果： **input框顯示時， hello world 文字就隱藏， hello world 文字顯示時， input框就隱藏** 。如果用 **簡單寫法** 就是像下面這樣寫： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動態組件和異步組件</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ data(){ return { currentItem: 'input-item' } }, methods: { handleClick(){ if(this.currentItem === 'input-item'){ this.currentItem = 'common-item' } else { this.currentItem = 'input-item' } } }, template: ` <input-item v-show="currentItem === 'input-item'" /> <common-item v-show="currentItem === 'common-item'" /> <button @click="handleClick">切換</button> ` }) // 子組件 app.component('input-item', { template: `<input />` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ 上面的代碼看似簡單，但是代碼量大，下面再看一下用 **動態組件** 實現的相同效果， **動態組件實際上就是一個 component 標簽，通過is屬性來決定這個顯示的是哪個組件** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動態組件和異步組件</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ data(){ return { currentItem: 'input-item' } }, methods: { handleClick(){ if(this.currentItem === 'input-item'){ this.currentItem = 'common-item' } else { this.currentItem = 'input-item' } } }, template: ` <component :is="currentItem" /> <button @click="handleClick">切換</button> ` }) // 子組件 app.component('input-item', { template: `<input />` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ 這樣就會有一個問題，在 **輸入框輸入內容后，** 點擊 **切換按鈕2次** ，又 **回到顯示輸入框的狀態下，發現輸入框內輸入的內容消失了** ，這時候就需要用到**keep-alive標簽** 來解決這個問題， **keep-alive** 的意思就是 **當這個動態組件第一次渲染時，它會把它里面的一些狀態，后面變更的一些情況，都記錄下來，當你回頭再用這個組件時，會從緩存里，把之前的數據拿過來填充上** ，代碼如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動態組件和異步組件</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ data(){ return { currentItem: 'input-item' } }, methods: { handleClick(){ if(this.currentItem === 'input-item'){ this.currentItem = 'common-item' } else { this.currentItem = 'input-item' } } }, template: ` <keep-alive> <component :is="currentItem" /> </keep-alive> <button @click="handleClick">切換</button> ` }) // 子組件 app.component('input-item', { template: `<input />` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ **動態組件** 與 **keep-alive** 有時候會一起使用，這點注意一下即可。 >[success] ## 異步組件 1. **同步組件** 首先展示一下 **同步組件**， **同步組件** 就是你 **調用這個組件時，這個代碼就會立即執行** ，這就叫做 **同步組件**。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>同步組件</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: ` <div> <common-item /> </div> ` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **異步組件** **異步組件** ： **動態加載** 一些組件，這樣的好處是，我們可以把一些大型的項目，加一些小的 **js文件**，在需要用到這些小 **js文件** 的時候，通過 **異步組件** 來引入這些 **js文件** 來使用這些 **js文件** 。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>同步組件</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 父組件 const app = Vue.createApp({ template: ` <div> <common-item /> <async-common-item /> </div> ` }) // 子組件 app.component('common-item', { template: `<div>hello world</div>` }) // 異步子組件 app.component('async-common-item', Vue.defineAsyncComponent(() => { return new Promise((reslve, reject) => { setInterval(() => { reslve({ template: `<div>這是異步組件</div>` }) }, 4000) }) })) const vm = app.mount('#root') </script> </html> ~~~