Vue生命周期

大大源码 • 2023年4月19日 pm11:23 • 其他

Vue实例的生命周期

1.什么是生命周期:从Vue实例创建,运行,到销毁期间,总盘随着各种各样的事件,这些事件,统称为生命周期!

2.生命周期钩子=生命周期函数=生命周期事件

3.主要的生命周期函数分类:

创建期间的生命周期函数:
1. beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性
2. created:实例化已经在内存中创建OK,此时data和methods已经创建OK,此时还没有开始编译模板
3. mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
运行期间的生命周期函数:
1. beforeUpdata:状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因此此时还没有开始重新渲染DOM节点
2. updataed:实力更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了
销毁期间的生命周期函数:
1. beforDestroy:是李小慧之前调用,在这一步,实例依然完全可用
2. destroyed:Vue实例销毁后调用,调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

lifecycle

1.创建期间的生命周期函数

1.beforeCreate

//第一个生命周期函数,Vue对象实例化完全被创建出来后会执行他
beforeCreate() {
        console.log(this.msg);
        this.show()
      }
//data和methods中的数据都还没有,没初始化

2.created

调用methods中的方法,或操作data中的数据,最早只能在created函数中操作

created() {
        //第二个生命周期函数
        console.log(this.msg);
        this.show()
        //data和methods已经初始化好了
      }

3.beforeMount

调用beforeMount的时候页面模板字符串还没有被替换

beforeMount() {
        //第三个生命周期
        console.log(document.getElementById('text'));
        //模板已经在内存中编译完成，但是尚未渲染页面
      }

4.mounted

执行完mounted的时候,实例就完全创建好了,如果要通过某些插件操作页面上的DOM节点,最早要在mounted中进行

mounted() {
        //第四个生命周期
        console.log(document.getElementById('text'));
        //内存中的模板已经真实挂载到了页面中，页面已经渲染       
      }

2.运行期间的生命周期函数

运行期间的生命周期函数会根据data数据的改变而改变,0次~n次

1.beforeUpdate

<input type="button" value='修改msg' @click='msg="no"'>

beforeUpdate() {
        //数据更新之前
        console.log('界面上的元素内容' + document.getElementById('text').innerHTML);
        console.log('data中的msg数据' + this.msg);
        //执行beforeUpdate,页面中显示的数据还是之前的,data中的数据已经改变
      }

2.update

<input type="button" value='修改msg' @click='msg="no"'>

updated() {
        //数据跟新时
        console.log('界面上的元素内容' + document.getElementById('text').innerHTML);
        console.log('data中的msg数据' + this.msg);
        //updated事件执行的时候，页面和data数据已经保持同步，都是最新的
      }