vue钩子函数以及例子

Vue.js 是一个基于组件化的前端框架，它提供了一些钩子函数，用于控制组件在不同阶段的行为和处理。以下是 Vue.js 常用的钩子函数以及它们的作用和示例：

1. beforeCreate：在实例被创建之前调用。此时组件的数据、方法等还没有被初始化，不能访问和修改。常用于组件初始化前的一些操作，如获取数据等。

Vue.component('my-component', {
  beforeCreate: function () {
    console.log('beforeCreate')
  },
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})

1. created：在实例被创建之后调用。此时组件已经完成了数据的初始化，可以访问和修改。常用于组件初始化后的一些操作，如数据绑定等。

Vue.component('my-component', {
  created: function () {
    console.log('created')
  },
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})

1. beforeMount：在组件挂载到 DOM 之前调用。此时组件的模板已经编译完成，但还没有渲染到页面上。常用于在组件挂载前对数据进行处理。

Vue.component('my-component', {
  beforeMount: function () {
    console.log('beforeMount')
  },
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})

1. mounted：在组件挂载到 DOM 之后调用。此时组件已经渲染到页面上，可以访问 DOM 和组件的实例。常用于与 DOM 元素交互的操作，如绑定事件等。

Vue.component('my-component', {
  mounted: function () {
    console.log('mounted')
  },
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})

1. beforeUpdate：在数据更新之前调用。此时组件的数据已经被修改，但DOM还没有更新。常用于在数据更新前对数据进行处理。

Vue.component('my-component', {
  beforeUpdate: function () {
    console.log('beforeUpdate')
  },
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})

1. updated：在数据更新之后调用。此时组件已经完成了DOM的更新，可以访问和修改DOM。常用于与 DOM 元素交互的操作，如设置焦点等。

Vue.component('my-component', {
  updated: function () {
    console.log('updated')
  },
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})

1. beforeDestroy：在组件销毁之前调用。此时组件还存在于内存中，可以访问和修改组件的数据和方法。常用于组件销毁前的一些清理操作，如取消订阅等。

Vue.component('my-component', {
  beforeDestroy: function () {
    console.log('beforeDestroy')
  },
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})

1. destroyed：在组件销毁之后调用。此时组件已经从内存中移除，不能再访问和修改组件的数据和方法。常用于组件销毁后的一些清理操作，如释放资源等。

Vue.component('my-component', {
  destroyed: function () {
    console.log('destroyed')
  },
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})