activated和deactivated有何区别？解析！

2023-09-08 12:37:03

众所周知，activated和deactivated都是vue生命周期中的钩子函数，但它们的作用却截然不同。activated钩子函数在组件被激活时触发，而deactivated钩子函数在组件被停用时触发。

activated钩子函数可以用来执行一些初始化操作，比如获取数据或设置状态。deactivated钩子函数可以用来执行一些清理操作，比如释放资源或取消订阅事件。

activated钩子函数和deactivated钩子函数都是非常有用的，它们可以帮助我们更好地管理组件的生命周期。

示例

以下是一个main.js文件，其中明确指出了activated属于vue生命周期：

import Vue from 'vue'

Vue.component('my-component', {
  template: '<div>My Component</div>',
  activated() {
    console.log('Component activated.')
  },
  deactivated() {
    console.log('Component deactivated.')
  }
})

activated和deactivated的区别

activated和deactivated钩子函数之间的主要区别在于触发时机不同。activated钩子函数在组件被激活时触发，而deactivated钩子函数在组件被停用时触发。

此外，activated和deactivated钩子函数还可以用来执行不同的操作。activated钩子函数可以用来执行一些初始化操作，比如获取数据或设置状态。deactivated钩子函数可以用来执行一些清理操作，比如释放资源或取消订阅事件。

代码演示

以下是一个代码示例，演示了activated和deactivated钩子函数的具体用法：

import Vue from 'vue'

Vue.component('my-component', {
  template: '<div>My Component</div>',
  data() {
    return {
      count: 0
    }
  },
  activated() {
    this.count++
    console.log(`Component activated. Count: ${this.count}`)
  },
  deactivated() {
    this.count--
    console.log(`Component deactivated. Count: ${this.count}`)
  }
})

new Vue({
  el: '#app'
})