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钩子函数会被调用，从服务器重新获取数据并在组件中显示。