iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
3
Modern Web

「小孩才做選擇,我全都要。」小白也能輕鬆瞭解的 Vue.js 與 D3.js 。系列 第 15

[ Vue.js ] 狀態保留 keep-alive

學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?
別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》
讓你的 Vue 專案更上一層樓!


昨天介紹到動態元件的使用方法,我們可以使用 is 來快速切換元件中的內容,藉著省下不少程式碼上的複製貼上,並且在 DOM 結構上也不會渲染出不必要的內容:

<div id="app">
    <button type="button" @click="pagename = 'mainpage'">switch to Main page</button>
    <button type="button" @click="pagename = 'aboutpage'">switch to About page</button>
    <button type="button" @click="pagename = 'contactpage'">switch to Contact page</button>
    <component :is="pagename"></component>
</div>

但假如使用者在這些頁面中進行如表單輸入等等的操作,接著切換到另一個元件中,原本的元件頁面就會消失,並且觸發 destroyed的生命週期鉤子,而當使用者在切換回原先的頁面時,就會發現已經輸入過的資料已經遺失了。

而這並不是什麼奇怪的 BUG ,我們可以透過 created 生命週期鉤子被觸發的現象觀察證實,此時載入的已經是另一個全新的元件,而如果這時我們想要能夠自在的切換元件間,又想要保留元件原先的資料內容,則可以使用 keep-alive 這個標籤。

keep-alive

這個標籤最主要的功能,就是保留如上述一樣的情境時,因為切換而遺失的資料內容,原先消失的原因是因為 Vue.js 在虛擬 DOM 上的計算,導致渲染時會以該元件作為一個重新渲染的節點,最後刷新整個元件內部的資訊,而要藉由 keep-alive 保留內部資訊的使用方法也很簡單,我們只要在外層包覆一層 keep-alive 標籤即可:

<div id="app">
    <button type="button" @click="pagename = 'mainpage'">switch to Main page</button>
    <button type="button" @click="pagename = 'aboutpage'">switch to About page</button>
    <button type="button" @click="pagename = 'contactpage'">switch to Contact page</button>
    <keep-alive>
      <component :is="pagename"></component>
    </keep-alive>
</div>

JavaScript部分

Vue.component('mainpage', {
  template:`<div>This page is mainpage. Enter this page : {{ count }} </div>`,
  data(){
    return {
      count : 0
    }
  },
  activated() {
    this.count++
  },
  destroyed() {
    console.log('destroyed')
  },
})
Vue.component('aboutpage', {
  template:`<div>This page is aboutpage. Enter this page : {{ count }} </div>`,
  data(){
    return {
      count : 0
    }
  },
  activated() {
    this.count++
  },
  destroyed() {
    console.log('destroyed')
  },
})
Vue.component('contactpage', {
  template:`<div>This page is contactpage. Enter this page : {{ count }} </div>`,
  data(){
    return {
      count : 0
    }
  },
  activated() {
    this.count++
  },
  destroyed() {
    console.log('destroyed')
  },
})


let vm = new Vue({
  el:'#app',
  data:{
    pagename : 'mainpage'
  }
})

我們在上面範例中加入了一些觸發生命週期的鉤子,透過開發者工具列可以看到的是,原先當元件切換時,理應當觸發 destroyed 的生命週期鉤子,並且顯示 destroyed,然而最後結果卻沒有顯示,表示元件在切換到不同元件時,該元件並沒有被銷毀

此時切換回原先的元件時,可以發現觸發了生命週期鉤子中的 activated,表示元件並不是走原先 created 等初始化元件的過程,而 activated 在官方生命週期中則是表示元件重新被啟用的意思,並且可以發現先前的資料內容也同時被保存下來,如此一來將來有如表單輸入等等需要暫時保留資料的元件,可以透過 keep-alive 的這個標籤來達到保存的功能。

以上就是今天狀態保存 keep-alive 的說明與用法,明天將會介紹 Vue.js 的最後的一個好用功能 slot

明天就是 Vue.js 的最後一張啦,橘橘表示興奮到模糊
https://ithelp.ithome.com.tw/upload/images/20190917/20119062yrB2Z2gY2w.jpg


上一篇
[ Vue.js ] 動態元件 Dynamic component
下一篇
[ Vue.js ] 插槽 slot
系列文
「小孩才做選擇,我全都要。」小白也能輕鬆瞭解的 Vue.js 與 D3.js 。37
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言