Vue核心⑬(生命周期)

Vue核心⑬(生命周期)

文章目录

​​生命周期引入​​​​挂载流程​​​​更新流程​​​​销毁流程​​​​生命周期总结​​

生命周期引入

​​生命周期​​：

又名：生命周期回调函数、生命周期函数、生命周期钩子。是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是 vm 或 组件实例对象。

例如我们现在有一个需求，页面上显示一行文字，并且动态的改变它的透明度。

代码如下：

注意：

{opacity}使用了对象的简写形式因为定时器在vm的外面，所以我们要获取opacity就可以通过数据代理从vm上获得因为小数的运算在js中是不准确的，所以我们没有写成vm.opacity === 0，而是写成vm.opacity <= 0

这样写可以实现功能，但是Vue实例与处理逻辑分开了，且处理逻辑还在操作Vue中的数据。也就是说从功能上来讲两者连在一起，但是从代码层面上来讲，他们俩是割裂开的。我们希望将这个逻辑放入到Vue中去。

此时我们就可以借助生命周期函数。在Vue完成模板的解析并把真实DOM全部​​挂载​​到页面上完毕之后，会调用一个mounted()函数，我们可以借助它来完成这个案例：

​​挂载​​就是第一次把真实DOM放入到页面中

mounted中Vue已经把它的this维护成了vm。所以上面的代码中使用箭头函数的时候，this往外寻找就是vm。

挂载流程

下图中红圈mounted之前的部分都属于挂载部分。

红色圆框对应着生命周期函数

其中有几个注意点：

这个地方的create不是指的vm创建，而是数据监测、数据代理的创建

此处是可以进行DOM操作的，页面的效果也会发生变化。但是紧随其后

也就是说不管你此时如何操作DOM，当Vue把虚拟DOM转为真实DOM之后，你原来操作的效果都会消失。

template是什么？ 例如我们现在有一段代码：

我们可以借助template让容器里面什么都不写：

注意：

template后面跟字符串如果不想全写在一行就要使用模板字符串，否则报错Vue会直接把template当作模板执行后面的步骤(解析生成真实DOM·····)。template里面只能有一个根元素，所以我们把他用div包裹(不要使用