VueActivated用法詳解

一、VueActivated介紹

VueActivated是Vue.js的生命周期鉤子函數之一，它在組件被激活時被調用，也就是當組件被插入到DOM中並在其中展示時調用。這個鉤子函數在組件被創建和掛載之後立即被調用，可以用來在服務端渲染期間填充應用程序的狀態。

二、VueActivated用法

VueActivated鉤子函數接受一個回調函數，在組件被激活時調用這個回調函數。這個回調函數可以用來初始化一些數據或者在組件被激活時執行一些非同步操作，如發送Ajax請求等。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  activated() {
    axios.get('/api/message')
      .then(res => {
        this.message = res.data
      })
      .catch(err => {
        console.log(err)
      })
  },
}
</script>

在上面的代碼中，activated鉤子函數通過發送一個Ajax請求，來獲取消息並將其存儲在組件的data屬性中，以便在組件模板中渲染。

三、VueActivated和VueCreated的區別

在Vue.js中，VueActivated鉤子函數和VueCreated鉤子函數都是在組件被創建時被調用的。它們的主要區別在於調用時機。VueCreated鉤子函數在組件實例被創建之後立即調用，而VueActivated鉤子函數則是在組件被激活時被調用。

VueActivated鉤子函數在組件被激活時調用，因此它可以用來執行一些與DOM相關的操作，例如更新元素的位置、設置焦點等。而VueCreated鉤子函數在組件被創建時調用，因此它主要用來初始化組件的數據。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  created() {
    axios.get('/api/message')
      .then(res => {
        this.message = res.data
      })
      .catch(err => {
        console.log(err)
      })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.input.focus()
    })
  },
}
</script>

在上面的代碼中，created鉤子函數用來初始化組件的數據，而activated鉤子函數用來設置一個輸入框的焦點。

四、VueActivated和VueMounted的區別

VueMounted鉤子函數和VueActivated鉤子函數類似，它們都是在組件被插入到DOM中並在其中展示時被調用。它們的主要區別在於VueMounted鉤子函數在當前組件的所有子組件也都被掛載後才被調用。

因此，VueMounted鉤子函數適合用來訪問DOM，例如設置一些事件監聽器。而VueActivated鉤子函數適合用來執行一些非同步操作或者獲取一些需要與伺服器交互的數據。

<template>
  <div>{{ message }}<><input ref="input" type="text"></div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  mounted() {
    this.$refs.input.addEventListener('keyup', this.handleInput)
  },
  activated() {
    axios.get('/api/message')
      .then(res => {
        this.message = res.data
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    handleInput() {
      console.log('input value', this.$refs.input.value)
    }
  }
}
&lt/script>

在上面的代碼中，mounted鉤子函數用來設置一個輸入框的keyup事件，而activated鉤子函數則用來獲取一些消息並將其存儲在組件的data屬性中。

五、VueActivated和VueKeepAlive的關係

VueKeepAlive是Vue.js的一個高階組件，在組件被銷毀時將其緩存，以便在下一次需要使用時可以重用。VueKeepAlive與VueActivated的關係在於，當一個被緩存的組件被重新激活時，它的VueActivated鉤子函數會被調用。

這意味著，在一個被緩存的組件重新激活時，可以利用VueActivated鉤子函數來執行一些需要在組件重新激活時完成的操作，例如重新從伺服器獲取數據。

<template>
  <div>{{ message }}<><input ref="input" type="text"></div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  activated() {
    axios.get('/api/message')
      .then(res => {
        this.message = res.data
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    handleInput() {
      console.log('input value', this.$refs.input.value)
    }
  }
}
&lt/script>

<keep-alive>
  <router-view></router-view>
</keep-alive>

在上面的代碼中，當一個被緩存的組件被重新激活時，VueActivated鉤子函數會被調用，從伺服器重新獲取數據並在組件中顯示。