Vue2.0 生命周期 更新流程

Vue官网_生命周期图示
挂载流程是Vue生命周期里步骤最长的

这一章就得了解Vue生命周期的更新流程

在挂载流程里面<template></template>标签不能作为根元素去使用，在Vue2里面只能使用<div></div>但是Vue3里面提出了新的特性fragment专门解决这个问题的

为什么要留意挂载流程里面的$el?

Vue在进行新的虚拟DOM和旧的虚拟DOM比较的时候万一有的节点和有的元素可以复用，是不是它得有之前的这个元素，有之前这个节点它才能去复用
验证:

mounted() {
    console.log('mounted',this.$el)
},

<div id="root">
    <h2>当前的n值:1</h2>
    <button @click="btn">点我,n++</button>
</div>

mounted() {
    console.log('mounted',this.$el instanceof HTMLElement)
},

true

这是一个真实的DOM

更新的流程很简单

从过载流程的mounted开始如果有数据更新就进入更新流程

wehn data changes

你只要敢Vue里面data里面的数据,Vue就会发现只要你一改东西Vue就会帮你调生命周期函数(beforeUpdata)

beforeUpdata(更新之前)(生命周期函数)

此时: 数据是最新的,但页面是旧的,即:页面尚未和数据保持同步。
测试:

beforeUpdate() {
    console.log('beforeUpdate')
},

点击按键修改n值，控制台出现了'beforeUpdate'

数据已经更新了，但是模板还没来得及放到页面

验证:

beforeUpdate() {
    console.log('beforeUpdate')
    console.log(this.n)
    debugger;
},

beforeUpdate
2

控制台里面显示n已经是2了，但是页面没来的及把2放到模板

接下来来到Virtual DOM re-render and patch

Virtual DOM re-render and patch

Virtual DOM:虚拟DOM
re-render:重新-渲染
patch:新的虚拟DOM和旧的虚拟DOM进行比较

根据新数据，生成性的虚拟DOM,随后与旧的虚拟DOM进行比较，最终完成页面更新,即:完成了Model->View的更新

接下来就来到了updated

updated(生命周期函数)

此时:数据是新的,页面也是新的,即:页面和数据保持同步
验证:

updated() {
    console.log('updated')
    console.log(this.n)
    debugger
},

beforeUpdate
updated
2

数据是最新的2
页面也是2

这就把更新的流程说完了，设计到的就一个环节,俩个生命周期函数