vue2生命周期函数的基本使用与执行过程

最新推荐文章于 2024-05-17 13:52:13 发布

前端小白AAA

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量779

点赞数

文章标签： javascript vue 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/domnk/article/details/129328874

版权

首先，一共有8个生命周期函数

1：初始化

<script>
export default {
beforeCreate(){}
//初始化前
created(){}
//初始化后
}
</script>

beforeCreate(){}：由于是初始化前，无法通过该函数使用data与methods里的变量与方法，因为data与methods还未初始化。

created(){}：初始化后，这个函数里可以使用data与methods里的变量。

2：挂载

<script>
export default {
beforeMount(){}
//挂载真实dom前
mounted(){}
//挂载真实dom后
}
</script>

beforeMount(){}：这里无法使用真实dom，一般在这里预处理data数据。

mounted(){}：可以使用真实dom

3：更新

<script>
export default {
beforeUpdate(){}
//更新dom前
updated(){}
//更新dom后
}
</script>

beforeUpdate(){}：无法使用更新后的dom

updated(){}：可以使用更新后的dom

4：销毁

<script>
export default {
beforeDestory(){}
//销毁前
destoryed(){}
//销毁后
}
</script>

流程：

<script>
export default {
beforeCreate(){}
//初始化前
created(){}
//初始化后
//在初始化阶段的钩子函数只会执行一次


beforeMount(){}
//挂载真实dom前
mounted(){}
//挂载真实dom后
//挂载阶段的钩子函数也只会执行一次


beforeUpdate(){}
//更新dom前
updated(){}
//更新dom后
//每次更新完dom元素，页面刷新，都会导致更新阶段的钩子函数执行一次


beforeDestory(){}
//销毁前
destoryed(){}
//销毁后
//最后销毁时执行一次
}
</script>

执行流程：

初始化阶段：

1:实例化vue(组件也算vue实例)。 new Vue()或者components:{组件名:引入组件时的名称}

2：向实例化对象添加属性，方法与生命周期函数。

3：挂载beforeCreate钩子函数，挂载后会自动被vue调用执行，在该钩子函数里无法放问data(){}里的变量，因为上一步没有把data(){}与methods:{}挂载到实例对象上。

4：初始化data与methods，同时把属性挂载到vue实例对象身上。这步过后才能使用this.变量名使用data(){}里的变量。

5：挂载created钩子函数并执行，这里的钩子函数可以使用data(){}，与methods里的变量与方法。

6：编译模板，分析。先检查有无el选项。若无，则等待vue实例对象手动调用$.mount方法，若有，则继续顺位执行。这里el选项就是决定vue实例编译好模板后要把编译后的标签结构挂到哪里。具体在main.js文件里，new Vue({el:'#app'})。el选项把vue实例化编译后的模板挂载到index.html的id叫app的标签上

挂载阶段：