vue的生命周期函数及过程的简述:
- vue的生命周期函数,其实就是vm的生命周期;
- 创建:beforeCreate、created
- 挂载:beforeMount、mounted
- 更新:beforeUpdate、updated [ˌʌpˈdeɪtɪd]
- 销毁:beforeDestroy、destroyed
vue的生命周期就是vue实例从创建,挂载,更新,销毁的过程;
beforeCreate创建前,初始化的vue实例只有默认的事件和生命周期;
beforeCreate和created之间会挂载Data,methods绑定事件;
根据 el 挂载页面元素,如果没有设置 el ,可以调用vm.$mount(el)函数手动挂载;el 挂载结束后,根据编译templete / 或者outerHTML(el)作为模板渲染页面;
在beforeMount前虚拟DOM已经创建完成;之后在mounted前,将vm.$el替换掉页面元素el; mounted 之后将虚拟dom挂载到了真实页面(此时页面已经全部渲染完成);此时如果数据变化就会触发beforeUpdate和updated进行一些操作;
最后主动调用销毁函数或者组件自动销毁时beforeDestroy,手动撤销监听事件,计时器等;destroyed时仅存在Dom节点,其他所有东西已自动销毁。这就是我所理解的vue的一个完整的生命周期;
vue 的生命周期图解: