一、vue的生命周期函数
1.Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期.
2. vue的生命周期总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后
3. 具体的过程:
1)创建前/后: 在beforeCreated
阶段,vue实例的挂载元素$el
和数据对象data
都为undefined
,还未初始化,在created
阶段,vue实例的数据对象data
有了,$el
还没有
2)载入前/后:在beforeMount
阶段,vue实例的$el
和data
都初始化了,但还是挂载之前为虚拟的dom节点,data.message
还未替换,在mounted
阶段,vue实例挂载完成,data.message
成功渲染
3)更新前/后:当data变化时,会触发beforeUpdate
和updated
方法
4)销毁前/后:在执行destroy
方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
二、vue的生命周期过程详解
- 在谈到Vue的生命周期的时候,我们首先需要创建一个实例,也就是在
new Vue ( )
的对象过程当中,首先执行了init
(init
是vue组件里面默认去执行的),在init
的过程当中首先调用了beforeCreate
,然后在injections
(注射)和reactivity
(反应性)的时候,它会再去调用created
。所以在init的时候,事件已经调用了,我们在beforeCreate
的时候千万不要去修改data里面赋值的数据,最早也要放在created
里面去做(添加一些行为) - 当created完成之后,它会去判断
instance(实例)
里面是否含有“el”option(选项)
,如果没有的话,它会调用vm.$mount(el)
这个方法,然后执行下一步;如果有的话,直接执行下一步。紧接着会判断是否含有“template”
这个选项,如果有的话,它会把template
解析成一个render function
,这是一个template
编译的过程,结果是解析成了render
函数 render
函数里面的传参h就是Vue里面的createElement
方法,return返回一个createElement
方法,使用render
函数的结果和我们之前使用template
解析出来的结果是一样的。render函数是发生在beforeMount
和mounted
之间的- 这也从侧面说明了,在
beforeMount
的时候,$el
还只是我们在HTML里面写的节点,然后到mounted
的时候,它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执行了render function
的内容 - 在使用.vue文件开发的过程当中,我们在里面写了template模板,在经过了
vue-loader
的处理之后,就变成了render function
,最终放到了vue-loader
解析过的文件里面。这样做有什么好处呢?原因是由于在解析template
变成render function
的过程,是一个非常耗时的过程,vue-loader
帮我们处理了这些内容之后,当我们在页面上执行vue代码的时候,效率会变得更高 beforeMount
在有了render function
的时候才会执行,当执行完render function
之后,就会调用mounted
这个钩子,在mounted
挂载完毕之后,这个实例就算是走完流程了- 后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化,会调用
beforeUpdate
,然后经过Virtual DOM
,最后updated
更新完毕。当组件被销毁的时候,它会调用beforeDestory
,以及destoryed
- 钩子函数,其实和回调是一个概念,当系统执行到某处时,检查是否有hook,有则回调。说的更直白一点,每个组件都有属性,方法和事件。所有的生命周期都归于事件,在某个时刻自动执行
- 这就是vue实例从新建到销毁的一个完整流程
- Vue为我们提供了
renderError
方法,这个方法只有在开发的时候它才会被调用,在正式打包上线的过程当中,它是不会被调用的。它主要是帮助我们调试render
里面的一些错误