了解Vue2.0的生命周期

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

网上有很多关于vue生命周期的文章。我这篇文章的出处其实是我对官网上描述的一句话的思考和理解：“el被一个新创建的vm代替。$el”，所以文章更多的内容可能是对vue生命周期中“created-before mount-mount-mount”过程的理解。

创建前-已创建已创建

在这个阶段，事件被初始化，数据被观察。

创造

vue实例在创建后被调用。此时，数据观察器的配置、属性和方法的操作以及watch/event事件的回调已经完成。

您可以在方法中调用方法，访问和修改数据中的数据，触发响应更改以更新DOM呈现，在监视中触发相应的方法，并重新计算计算的相关属性。

通常，在创建时，会发出ajax请求来初始化实例数据。

此时vm。$el是隐形的。

已创建-在装载前之间

在这个过程中，

A.首先，判断实例中是否有el选项，如果有，继续向下编译，如果没有，停止编译直到vm。调用$ mount(El)(El是挂载的DOM节点)；

b、判断例子中是否有模板，如果有，将其作为模板编译成rander函数；

C.如果没有模板，则提取挂载了DOM元素的html(即el及其内部元素对应的DOM元素)作为模板进行编译；

*注意：el对应的DOM元素不能是body/html元素，因为后面挂载vue实例时，el对应的DOM元素及其内部元素会被模板渲染的新DOM替换。

d、如果实例对象中存在随机函数，则直接通过随机函数进行渲染操作。

优先级：rander函数模板外部html

此时，rander函数已经准备好，并第一次被调用。

在这个过程中，$el被初始化为对应于实例中el选项的DOM元素，所以当beforeMount时，用vm获得什么。$el是用于挂载DOM元素的html。

即将挂载

当调用beforeMount时，$el此时可见。

安装前安装安装

在这个过程中，el被新创建的虚拟机所取代。$el，并且实例已装入。也就是说，实例中的el选项被模板呈现创建的DOM元素替换，页面中的挂载点被呈现的vue实例代码段替换。

安装好的

此时实例已经挂载在DOM上，可以通过DOM API获取实例中的DOM节点。打印虚拟机。$el，并发现以前的挂载点和内容已经被新的DOM所取代。

让我们通过栗子来看看这两个过程。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http :3359 cdn . bootss.com/Vue/2 . 5 . 13/Vue . min . js '/script/head met charset id=' app ' a id=' ela ' href=' ' { { message } }/a/div/body script var app=new Vue({ El : ' # app '，data: function}，模板： ' p id=' elp ' { message } }/p，在挂载：函数()之前{console.group('在挂载前预挂载状态========" ')；让state={ 'el': this。$ El ' data ' :这个。$data，' message': this.message }让a=document . getelementbyid(' ela ')；let p=document . getelementbyid(' elp ')；console.log(这。$ El)；console.log(状态)；console . log(a)；//a id=' ela ' href=' ' { { message } }/a console . log(p)；//null}，mount ed : function(){ console . group('已装载装载结束状态========" ')；让state={ 'el': this。$ El ' data ' :这个。$data，' message': this.message }让a=document . getelementbyid(' ela ')；let p=document . getelementbyid(' elp ')；console.log(这。$ El)；console.log(状态)；console . log(a)；//null console . log(p)；//p id='elp '父亲/p }/脚本/html

使用template/rander选项，您可以在控制台中清楚地看到，装载后，el将被新创建的虚拟机替换。$el。

在挂载之前，它以初始el和虚拟DOM的形式存在。此时模板中的内容作为模板，模板内容不可见，打印的P标签为空；

挂载后，模板渲染的新DOM替换原el，原el对应的DOM不存在，打印的A标签为空。

更新前和更新后

当数据对象中的数据更新时，将触发beforeUpdate钩子，视图层尚未更新。BeforeUpdate有以下几点需要注意：

A.在触发beforeUpdate之前，必须在模板中直接或间接使用更新的数据；

B.在挂载之前，数据中的数据更新不会触发beforeUpdate！也就是说，在创建时或装载前更改数据不会触发更新过程；

C.如果在beforeUpdate中再次修改数据值，将再次触发beforeUpdate钩子，更新过程将执行两次。

更新时，视图图层已更新。

(在上面的代码中添加两个钩子)

mount ed : function(){ this . message=' first '；//this . show=false；//由于模板中没有使用show，show的更改不会触发beforeupdate}、before update : function(){ console . group(' before update status==========" ')；let elp=document . getelementbyid(' elp ')。innerHTMLconsole . log(' message ':this . message)；console . log(' DOM:' elp ')；}，updated : function(){ console . group('更新的更新完成状态==========" ')；let elp=document . getelementbyid(' elp ')。innerHTMLconsole . log(' message ':this . message)；console . log(' DOM:' elp ')；}

这里要注意一点：在视图层，需要通过innerHTML获取对应元素节点的内容，但是不能直接获取元素节点。直接获取元素节点，控制台上打印的视图层中的数据都处于更新状态，无法打印实时正确值，这应该和Chrome控制台的输出有关。

对于第三篇文章，让我们看一下下面的代码演示：

mount ed : function(){ this . message=' first '；}，beforeupdate :函数(){console。组('更新前状态========" ')；let elp=document . getelementbyid(' elp ')。innerHTMLconsole . log(' message ':this . message)；console . log(' DOM:' elp ')；this . message=“second”；//此时，在beforeUpdate}中再次修改了消息的值，updated : function(){ console . group('更新的更新完成状态===========" ')；let elp=document . getelementbyid(' elp ')。innerHTMLconsole . log(' message ':this . message)；console . log(' DOM:' elp ')；}

在这里，我们可以清楚地看到，更新过程已经进行了两次，但是对于打印结果有一些疑问：如果第一次将message的值改为first，通过第一次渲染更新DOM，那么第一次调用updated时，message和DOM中的值应该是第一个，此时打印第二个。我理解的是，DOM在第一次执行更新时已经完成了第二次渲染更新，具体过程需要事后通过学习源代码来理解。在这里，如果大家有不同的理解或者更详细的解释，可以在评论区留言，一起学习。

在这里，我们可以给beforeUpdate添加一个计时器来修改消息的值，然后我们可以等待第一次数据更改。渲染完DOM更新后，我们可以进行第二次数据更改。

在更新：函数之前(){控制台。组('更新前状态===========" ')；let elp=document . getelementbyid(' elp ')。innerHTMLconsole . log(' message ':this . message)；console . log(' DOM:' elp ')；变量=这个；setTimeout(function(){ that . message=' second '；});//this . message=“second”；//此时，在的beforeUpdate}中再次修改了消息的值