vue的生命周期函数的理解

朱雀 2021-11-14 11:44 322阅读 0赞

#### 一、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的生命周期过程详解 ####

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