麦林斯的笔记

生命周期

Vue2.X 的生命周期

一、什么是生命周期

从vue实例创建、数据初始化、挂载、更新到销毁的期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

生命周期钩子：就是生命周期事件的别名而已。（生命周期钩子 = 生命周期函数 = 生命周期事件）

二、Vue.X 主要的生命周期函数

创建期间的生命周期函数

beforeCreate：实例在内存中被创建出来，此时，还没有初始化好data和methods属性
created：实例已经在内存中创建完成，此时data和methods已经创建完成，还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经编译好的模板，挂载到了页面指定的容器中显示

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后 ）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount

挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

运行期间的生命周期函数

beforeUpdate：状态更新之前执行此函数，此时data中的值是最新的，但是界面上显示的数据还说旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

beforeUpdate

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

销毁期间的生命周期函数

beforeDestroy：实例销毁之前调用，在这一步，实例仍完全可用
destroyed：实例销毁之后调用，调用后，vue实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

beforeDestroy（销毁前）

实例销毁之前调用，在这一步，实例仍完全可用。

  • 这一步还可以用this来获取实例，
  • 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

三、生命周期相关

created和mounted的区别

  • created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  • mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

Vue内置的方法属性在生命周期中的顺序

props => methods =>data => computed => watch

keep-alive的生命周期

  • activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
  • deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

keep-alive介绍

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
    <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
    </component>
</keep-alive>

参数解释

  • include - 字符串或正则表达式，只有名称匹配的组件会被缓存
  • exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
  • include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

例子:

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
    <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
    <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
    <component></component>
</keep-alive>

生命周期与keepalive的关系：

<keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时组件A的deactivated的生命周期函数会被触发；在切换回组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发了，而且A组件的文字颜色也是我们之前设置过的。

created和mounted有什么区别

  • created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  • mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

父组件和子组件对应的生命周期顺序是怎么样的（created和mounted）

初次渲染就会触发的生命周期

beforeCreate() , created()
beforeMount() , mounted()

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。 组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

加载渲染过程 子组件在父组件的beforeMount和Mounted之间渲染

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

影响到子组件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
不影响子组件： 父beforeUpdate -> 父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

四、Vue3.X 生命周期

五、Vue2.X 生命周期图示

Untitled

Untitled

六、Vue2.X 和 Vue3.X 生命周期对比

Untitled

Untitled