好家伙,军训结束了,回归

Vue实例的生命周期

1.什么是生命周期?

从Vue实例创建,运行到销毁期间总是伴随着各种各样的事件,这些事件,统称为生命周期.

2.什么是生命周期钩子?

生命周期函数的别称.

生命周期钩子=生命周期函数=生命周期事件

3.一些生命周期函数

3.1. beforeCreate

这是第一个,表示在实例在完全被创建出来之前(什么方法,数据都还没有被处理),会执行它.

3.2. created

这是第二个,在created中,data和methods都已经被初始化好了,

3.3. beforeMount

这是第三个,在beforeMount执行的时候,页面中的元素,还没有被真正的替换过来,只是之前写的一些字符模板

3.4. mounted

这是第四个,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了

注意:这是实例创建期间的最后一个生命周期函数,这个执行完后,实例就已经被完全创建好了

4.部分图解

上图

以下是解释

4.1.

刚开始创建了一个Vue空的实例对象,只有一些默认的生命周期函数,和默认事件

4.2.

这个是初始化,在这里,data和methods都初始化完成了

4.3.

这里表示Vue开始编辑模板,把Vue代码中的那些指令进行执行,

最终,在内存中生成一个编译好的最终模板字符串

然后,把这个模板字符串,渲染为内存中的DOM

此时,只是在内存中,渲染好了模板,并没有把模板挂载到真正的页面中去;

(后两句看不懂)

4.4.

这一步,将内存中编译好的模板,真实的转换到网页中去

好了,先写这么多了,

第四十篇:Vue的生命周期(一)的更多相关文章

  1. Vue2 第四天学习(Vue的生命周期)

    阅读目录 1.理解VUE---混合 2.Vue实例化选项 3.Vue实例化的生命周期 回到顶部 1.理解VUE---混合 在了解Vue生命周期之前,我们先来学习Vue中的混合吧: 为什么需要使用混合? ...

  2. Python之路(第四十三篇)线程的生命周期、全局解释器锁

    一.线程的生命周期(新建.就绪.运行.阻塞和死亡) 当线程被创建并启动以后,它既不是一启动就进入执行状态的,也不是一直处于执行状态的,在线程的生命周期中,它要经过新建(new).就绪(Ready).运 ...

  3. vue学习指南:第三篇(详细) - vue的生命周期

    今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...

  4. 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  5. 如何解释vue的生命周期才能令面试官满意?

    当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...

  6. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

  7. vue笔记 - 生命周期第二次学习与理解

    对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...

  8. vue之生命周期的一点总结

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 一.vue实例的生命周期(vue2.0) 二.生命周期描述:(参考截图) 三.例子 window.vm = ...

  9. Vue实例生命周期+vueRoter

    Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...

随机推荐

  1. 【Redis】简单动态字符串SDS

    C语言字符串 char *str = "redis"; // 可以不显式的添加\0,由编译器添加 char *str = "redis\0"; // 也可以添加 ...

  2. 1.2 操作系统的第二个功能——并发功能 -《zobolの操作系统学习札记》

    1.2 操作系统的第二个功能--并发功能 目录 1.2 操作系统的第二个功能--并发功能 问1:什么是并发功能?并发功能是必要的吗? 问2:并发功能必须要求拥有多核CPU吗? 问3:多核CPU和单核C ...

  3. 【由浅入深_打牢基础】HOST头攻击

    [由浅入深_打牢基础]HOST头攻击 前几天一直准备别的事情,然后用了2/3天时间去挖了补天某厂的SRC,还是太菜了,最后提交了一个低危(还没出结果,还有点敏感信息泄露,感觉略鸡肋也没交),不过偶然发 ...

  4. ES5的继承和ES6的继承有什么区别?让Babel来告诉你

    如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么 ...

  5. 用python整个URL缩短器

    URL缩短 短网址由于易于记忆和输入,因此在数字营销领域非常受欢迎. 这里给大家介绍一下,如何使用Python创建URL缩短器. python答疑 咨询 学习交流群2:660193417### fro ...

  6. 20行python代码,轻松获取各路小说,非常简单

    哔哔两句 作为现代青年,我相信应该没几个没看过小说的吧,嘿嘿~ 一般来说咱们书荒的时候怎么办?自然是去起某点排行榜先找到小说名字,然后再找度娘一搜,哎 ,笔趣阁就出来答案了,美滋滋~但是那多麻烦,咱们 ...

  7. python 常用的数据类型

    常用的数据类型 整数型 -> int 可以表示正数.负数.0 整数的不同进制的表示方法 十进制->默认的进制,无需特殊表示 二进制->以0b开头 八进制->以0o开头 十六进制 ...

  8. mt19937 用法

    老是忘记怎么用,自己写一个用作备忘录吧. 首先需要的头文件: #include <random> 或者是 #include <bits/stdc++.h> //万能头 yyds ...

  9. 『现学现忘』Git后悔药 — 30、版本回退git reset --hard命令说明

    git reset --hardcommit-id命令:回退到指定版本.(hard:强硬,严格的回退) 该命令不仅移动了分支中HEAD指针的位置,还将工作区和暂存区中数据也回退到了指定的版本. (提示 ...

  10. react antd上拉加载与下拉刷新与虚拟列表使用

    创建项目 create-react-app antdReact 安装:antd-mobile.react-virtualized npm i antd-mobile -S npm i react-vi ...