vue2常用的钩子函数

### Vue2 中常用生命周期钩子函数及其使用方法

#### created 钩子函数
`created` 是实例创建完成后被调用，在此期间已完成以下两件事：完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

new Vue({
  data() {
    return { message: 'Hello, world!' }
  },
  created() {
    console.log('Component has been created.')
    // 可以在此处发起网络请求获取初始数据
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          this.message = response.data;
        })
    }
  }
})

#### mounted 钩子函数
当 `mounted` 被触发时，意味着该组件已经渲染到 DOM 中并可以访问真实的 DOM 元素了。此时适合做 DOM 操作或初始化第三方库[^4]。

new Vue({
  el: '#app',
  mounted() {
    console.log('Component is now mounted to the page.');
    // 初始化插件或其他依赖于真实DOM的操作
    this.initPlugin();
  },
  methods: {
    initPlugin() {
      const pluginInstance = new Plugin('#plugin-container');
      // ...
    }
  }
})

#### beforeDestroy 和 destroyed 钩子函数
这两个钩子分别发生在销毁前 (`beforeDestroy`) 和销毁后 (`destroyed`) 。它们主要用于清理工作，如取消定时器、解除事件监听等，防止内存泄漏[^2]。

new Vue({
  data() {
    return {
      timerId: null,
      elementToWatch: document.getElementById('element-to-watch')
    };
  },
  beforeDestroy() {
    clearInterval(this.timerId);
    this.elementToWatch.removeEventListener('click', this.handleClick);
  },
  destroyed() {
    console.log('The component was successfully destroyed.');
  }
});