Vue3 onActivated

一、介紹

Vue3是時下最火的JavaScript框架之一，它提供了許多特性來簡化我們的開發體驗。而其中一個非常重要的特性就是onActivated。onActivated生命周期鉤子函數是Vue3.x版本新增的，它是在組件切換至當前激活狀態時被觸發。本文將詳細介紹Vue3 onActivated的使用方法、場景及其優和缺點。

二、onActivated的使用方法

onActivated是Vue3中的生命周期鉤子函數，僅在使用keep-alive組件時才能被觸發。當keep-alive包裹的組件被切換至當前激活狀態時，onActivated便會被調用。

通過下面的代碼示例，我們可以清晰地了解onActivated的使用方法：

  
    <template>
      <div>
        <p>這是第{{ count }}次進入此組件</p>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            count: 0
          }
        },
        methods: {
          increaseCount() {
            this.count++
          }
        },
        onActivated() {
          this.increaseCount()
        },
        mounted() {
          this.increaseCount()
        }
      }
    </script>
  

在這個示例中，我們定義了一個名為count的變數，並通過onActivated鉤子函數來自增它的值。每次這個組件被激活時，這個值就會增加1。當這個組件被掛載時也會自增1，這樣我們就可以在這個組件中統計進入的次數了。

三、onActivated的場景

1、管理多個視圖的狀態

在實際場景中，我們可能需要管理多個視圖的狀態。例如，在一個購物車頁面中同時展示已添加的商品列表和已購買的商品列表。當用戶從商品列表跳入購物車頁面時，可能需要重新請求數據，但當用戶從已添加的商品列表跳轉到已購買的商品列表時則不需要再次請求數據。此時我們就可以使用onActivated鉤子函數來處理這個問題。

  
    <template>
      <div>
        <!-- 展示已添加的商品列表 -->
        <div v-if="showAdded">已添加的商品列表</div>
        <!-- 展示已購買的商品列表 -->
        <div v-if="showBought">已購買的商品列表</div>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            showAdded: true,
            showBought: false
          }
        },
        methods: {
          toggleView() {
            this.showAdded = !this.showAdded
            this.showBought = !this.showBought
          }
        },
        onActivated() {
          this.toggleView()
        }
      }
    </script>
  

在這個示例中，我們定義了兩個變數showAdded和showBought，並通過判斷它們的值來展示不同的商品列表。每次這個組件被激活時，我們通過使用onActivated鉤子函數來切換是否展示市場中的商品列表。

2、判斷是否需要執行某些操作

在一些組件在切換過程中，可能需要執行一些非同步操作，例如獲取數據或者修改頁面的樣式。而當組件被切換至非激活狀態時，非同步操作可能還沒完成，這就可能出現一些問題。這時我們可以使用onActivated生命周期鉤子函數來解決這個問題。

  
    <template>
      <div>
        <h1 :style="{ color: color }">{{ title }}</h1>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            color: '',
            title: ''
          }
        },
        methods: {
          async fetchTitle() {
            const res = await fetch('https://example.com/title')
            const data = await res.json()
            this.title = data.title
          }
        },
        async mounted() {
          await this.fetchTitle()
        },
        async onActivated() {
          if (!this.title) {
            await this.fetchTitle()
          }
          this.color = 'red'
        }
      }
    </script>
  

在這個示例中，我們定義了一個fetchTitle方法，通過非同步獲取遠程伺服器上的標題，並將其存儲在title變數中。在組件被掛載時，我們會調用這個方法來獲取標題。在組件被激活時，我們會檢測title是否已經有值，如果沒有，則調用fetchTitle來獲取標題。然後我們會將標題的顏色設置為紅色。

3、動態重新渲染組件

在一些特殊的場景中，我們可能需要在組件被激活時重新渲染組件。例如，在一個輪播圖組件中，每次用戶在輪播圖內切換時，我們需要重新渲染這個組件以更新當前輪播圖的信息。此時我們便可以使用onActivated鉤子函數來實現。

  
    <template>
      <div>
        <p>當前Index：{{ currentIndex }}</p>
        <img :src="src[currentIndex]" />
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            currentIndex: 0,
            src: [
              'https://example.com/img1.jpg',
              'https://example.com/img2.jpg',
              'https://example.com/img3.jpg',
            ]
          }
        },
        methods: {
          async fetchCurrentIndex() {
            const res = await fetch('https://example.com/currentIndex')
            const data = await res.json()
            this.currentIndex = data.index
          }
        },
        async onActivated() {
          await this.fetchCurrentIndex()
          this.$forceUpdate()
        }
      }
    </script>
  

在這個示例中，我們定義了一個名為currentIndex的變數，以及一個存儲輪播圖信息的src數組。同時我們將在fetchCurrentIndex方法中非同步獲取遠程伺服器上的currentIndex值。在組件被激活時，我們會將currentIndex的值更新為伺服器上的currentIndex值，並調用$forceUpdate來強制組件重新渲染。

四、onActivated的優與缺點

優點

使用onActivated鉤子函數可以有效簡化我們的代碼，並提升我們的開發效率。其具備以下優點：

• 可以方便地管理多個視圖的狀態
• 可以判斷是否需要執行非同步操作
• 可以動態重新渲染組件

缺點

使用onActivated鉤子函數可能會導致一些不必要的渲染，其具備以下缺點：

• 不太適用於複雜組件
• 可能會出現性能問題

五、結論

onActivated是Vue3中非常重要的一個生命周期鉤子函數，它能夠為我們的開發帶來很多方便。鑒於其存在的缺點，我們需要在使用過程中仔細考慮，以確保組件能夠正常運行。