总结vue2的常用生命周期的作用以及使用方法
时间: 2023-05-19 13:03:09 浏览: 101
Vue2 的常用生命周期有以下几个:
1. beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。该钩子函数中无法访问到 data 和 methods 中的数据和方法。
2. created:在实例创建完成后被立即调用。该钩子函数中可以访问到 data 和 methods 中的数据和方法。
3. beforeMount:在挂载开始之前被调用,即将模板编译成 render 函数之前。
4. mounted:在挂载完成后被调用,即模板编译成 render 函数并且将其挂载到页面上之后。
5. beforeUpdate:在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。
6. updated:在数据更新之后被调用,发生在虚拟 DOM 重新渲染和打补丁之后。
7. beforeDestroy:在实例销毁之前被调用。该钩子函数中可以进行一些清理工作,比如清除定时器、解绑事件等。
8. destroyed:在实例销毁之后被调用。该钩子函数中无法访问到 data 和 methods 中的数据和方法。
使用方法:在 Vue 组件中,可以通过在组件的 options 中定义这些生命周期函数来使用它们。例如:
```
export default {
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('destroyed')
}
}
```
当组件被创建、挂载、更新、销毁时,对应的生命周期函数会被调用,我们可以在这些函数中执行一些逻辑。