Vue 生命周期篇探索 - 第二篇：生命周期-挂载流程

一平米

已于 2022-07-17 09:14:54 修改

阅读量262

点赞数

分类专栏： vue 文章标签： vue.js java 前端

于 2022-07-17 01:32:44 首次发布

本文链接：https://blog.csdn.net/pymxb1991/article/details/125827069

版权

vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

探索学习 Vue 生命周期篇
- 第二篇：生命周期-挂载流程

探索学习 Vue 生命周期篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第二篇：生命周期-挂载流程

以图例分析挂载流程

- 在这里插入图片描述

针对图做详细的说明：
- 生命周期它是一个函数，需要Vue 来帮我们调用；
- 绿色的图示，他只是一个环节，我们想干预是干预不了的,它也不是一个函数，就是一个环节；这个环节执行完之后，他会帮忙去调用Vue 的生命周期函数
- 黄色的图示，他只是一个判断，

1. new Vue

new Vue 引出，所有的流程，步骤都以new Vue 开始，没有new Vue 下面所有的就没有了意义

2. init Events & Lifecycle

初始化事件和生命周期
- 这个环节主要是去制定一些规则,比如说
1. 生命周期函数到底有几个，都叫什么名，什么时候去调用；
2. 还有关于事件的，比如事件修饰符拿once 来说，它叫一次性事件修改符，这里会制定规则，以后我们遇到 once 之后怎么处理事件，都需要在这个环节做好设定，要如何进行操作；
3. 在这一环境中 new Vue 传入的 data Vm 还没有收到，Vm 身上还没有**_data** _data 都没有，那么就更不用说data 身上的其它属性了;

3. beforeCreate（创建前）

此时：无法通过VM访问到data 中的数据，methods中的方法
在这一周期中因为还没有收到data _data也没有收到数据代理也没有，就更不用提怎么拿vm 中的数据了；
验证如下，定义beforeCreate 输出日志，debugger 卡断点 F12 观察Vue 实例情况

上代码

 <div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <h2>当前的n 值为{{n}}</h2>
        <button @click="add"> 点我n++</button>
    </div>
<script type="text/javascript">
    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    new Vue({
        el: "#root",
        data: {
            name: "安锐捷",
            n: 1,
        },
        methods: {
            add(){
                this.n++
            }
        },
        beforeCreate() {
            console.log("beforeCreate: comming");
            console.log("beforeCreate:",this);
            debugger
        },
    })
</script>

F12 观察图例

4. init injections & reactivity

init injections & reactivity(初始化数据监测，数据代理)
注入响应式也就是说初始化数据监测，数据代理
- 在这个环节也在初始化，初始化什么呢?
1. Vue 中最重要的数据监测、数据代理,就是在这里初始化的
2. 我们之前了解的Vue 如何进行数据监测对象变化、监测数组变化，给对象中属性匹配getter/setter ,对操作数组进行二次的包装，都是在这里完成的；
3. 还有之分析的数据代理 Object.defineProperty，也是在这个环节完成的
4. 引出我们的周期函数 beforeCreate created 创建之前、创建之后；在什么创建之前、创建之后呢?? 这里说的就是：数据监测、数据代理创建之前、创建之后

5. created（创建后）

created (此时：可以通过VM访问到data 中的数据，methods中配置的的方法)

前面的环节已经完成了数据监测，数据代理，这一周期中就是完成后的初次应用
直接上代码观察分析初始化的结果

验证如下，定义created 输出日志，debugger 卡断点 F12 观察Vue 实例情况

 <div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <h2>当前的n 值为{{n}}</h2>
        <button @click="add"> 点我n++</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
        new Vue({
            el: "#root",
            data: {
            name: "安锐捷",
            n: 1,
            },
            methods: {
                add(){
                    this.n++
                }
            },
            beforeCreate() {
                console.log("beforeCreate");
                console.log("beforeCreate:",this);
            },
            created() {
                console.log("created");
                console.log("created:",this);
                debugger
            },
        })
    </script>

F12 观察Vue 实例情况

6. Has “el” options

Has “el” options? 条件判断(这里所说的就是 new Vue 的时候有没有传入 el 的配置项？)
1. YES 代码 new Vue({ el: '#root', data: {}} )
  - Has “template” options
    1. YES: 代码 new Vue({ el: '#root', template:'', data: {}} )
      - complate template into render function ()
    2. NO 代码 new Vue({ el: '#root', data: {}} )
      - compile el’s outerHTML as template (编译外部的html 作为模板)
2. NO 代码 new Vue({data:{}})
  1. when vm.$mount(el) is caled
细节：当使用template 配置项时
1. 细节1 ，建议参数使用ES6 写法的模板字符串形式，
  如 template: <h2>当前n的值是:{{n}}</h2><button @click="add">点我n+1</button>
2. 细节2 ，template 中有且只有一个根节点，根节点必须是唯一的
  如细节1中写法其实是错误的，正确写法应该是如下,模板中内容使用**
  **包起来
  template: <div> <h2>当前n的值是:{{n}}</h2><button @click="add">点我n+1</button> </div>
在以上整个大的阶段执行的过程中，就会开始解析模板比如插值表达式，@click,自定义标签等等都开始解析了，完事之后，就会生成虚拟DOM(内存中)，页面还不能显示解析好的内容 (这里还没有给页面挂载)

如下流程图，观察当前所处的流程图位置

7. beforeMount（挂载前）

beforeMount(此时，页面呈现的是未经Vue编译的DOM结构，所有的DOM的操作，最终都不奏效)

挂前操作在第6步编译完虚拟DOM 本方法中加断点观察页面情况

验证如下，定义beforeMount 输出日志，debugger 卡断点 F12 观察Vue 实例情况

<div id="root">
    <h1>你好,{{name}}</h1>
    <hr/>
    <h2>当前的n 值为{{n}}</h2>
    <button @click="add"> 点我n++</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    new Vue({
        el: "#root",
        data: {
        name: "安锐捷",
        n: 1,
        },
        methods: {
            add(){
                this.n++
            }
        },
        beforeCreate() {
            console.log("beforeCreate");
            console.log("beforeCreate:",this);
        },
        created() {
            console.log("created");
            console.log("created:",this);
        },
        beforeMount() {
            console.log("beforeMount");
            console.log("beforeMount:",this);
            debugger
        },
    })

8. Create vm.$el and replace “el” with is

Create vm.$el and replace “el” with is (将内存中的虚拟DOM转为真实DOM插入页面)
- 创建一个vm 身上的$el 选项，然后替换掉整个 el 也就是使用$el 替换掉容器中的 el
- 就在这一步，Vue会把生成的虚拟DOM转为真实Dom,转为真实DOM之后，他给vm.$el 上存储了一份
- 存这个的目的主要是为了后期有需要复用的节点，直接使用即可

9. mounted（挂载后）

此时，页面呈现的是经过Vue编译的DOM，对DOM的编译操作均有效(尽可能避免)。
挂载操作执行完这一步页面解析完成，渲染完成，直接上代码，图例观察
直接上代码

 <div id="root">
         <h1>你好,{{name}}</h1>
         <hr/>
         <h2>当前的n 值为{{n}}</h2>
         <button @click="add"> 点我n++</button>
   </div>
   <script type="text/javascript">
         Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
         new Vue({
             el: "#root",
             data: {
             name: "安锐捷",
             n: 1,
             },
             methods: {
                 add(){
                     this.n++
                 }
             },
             beforeCreate() {
                 console.log("beforeCreate");
                 console.log("beforeCreate:",this);
             },
             created() {
                 console.log("created");
                 console.log("created:",this);
             },
             beforeMount() {
                 console.log("beforeMount");
                 console.log("beforeMount:",this);
             },
             mounted() {
                 console.log("mounted");
                 console.log("mounted:",this);
                 debugger
             },
         })
     </script>