第四十篇:Vue的生命周期(一)
好家伙,军训结束了,回归
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的生命周期(一)的更多相关文章
- Vue2 第四天学习(Vue的生命周期)
阅读目录 1.理解VUE---混合 2.Vue实例化选项 3.Vue实例化的生命周期 回到顶部 1.理解VUE---混合 在了解Vue生命周期之前,我们先来学习Vue中的混合吧: 为什么需要使用混合? ...
- Python之路(第四十三篇)线程的生命周期、全局解释器锁
一.线程的生命周期(新建.就绪.运行.阻塞和死亡) 当线程被创建并启动以后,它既不是一启动就进入执行状态的,也不是一直处于执行状态的,在线程的生命周期中,它要经过新建(new).就绪(Ready).运 ...
- vue学习指南:第三篇(详细) - vue的生命周期
今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...
- 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 如何解释vue的生命周期才能令面试官满意?
当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...
- vue之生命周期
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...
- vue笔记 - 生命周期第二次学习与理解
对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...
- vue之生命周期的一点总结
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 一.vue实例的生命周期(vue2.0) 二.生命周期描述:(参考截图) 三.例子 window.vm = ...
- Vue实例生命周期+vueRoter
Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el ...
随机推荐
- 【Redis】简单动态字符串SDS
C语言字符串 char *str = "redis"; // 可以不显式的添加\0,由编译器添加 char *str = "redis\0"; // 也可以添加 ...
- 1.2 操作系统的第二个功能——并发功能 -《zobolの操作系统学习札记》
1.2 操作系统的第二个功能--并发功能 目录 1.2 操作系统的第二个功能--并发功能 问1:什么是并发功能?并发功能是必要的吗? 问2:并发功能必须要求拥有多核CPU吗? 问3:多核CPU和单核C ...
- 【由浅入深_打牢基础】HOST头攻击
[由浅入深_打牢基础]HOST头攻击 前几天一直准备别的事情,然后用了2/3天时间去挖了补天某厂的SRC,还是太菜了,最后提交了一个低危(还没出结果,还有点敏感信息泄露,感觉略鸡肋也没交),不过偶然发 ...
- ES5的继承和ES6的继承有什么区别?让Babel来告诉你
如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么 ...
- 用python整个URL缩短器
URL缩短 短网址由于易于记忆和输入,因此在数字营销领域非常受欢迎. 这里给大家介绍一下,如何使用Python创建URL缩短器. python答疑 咨询 学习交流群2:660193417### fro ...
- 20行python代码,轻松获取各路小说,非常简单
哔哔两句 作为现代青年,我相信应该没几个没看过小说的吧,嘿嘿~ 一般来说咱们书荒的时候怎么办?自然是去起某点排行榜先找到小说名字,然后再找度娘一搜,哎 ,笔趣阁就出来答案了,美滋滋~但是那多麻烦,咱们 ...
- python 常用的数据类型
常用的数据类型 整数型 -> int 可以表示正数.负数.0 整数的不同进制的表示方法 十进制->默认的进制,无需特殊表示 二进制->以0b开头 八进制->以0o开头 十六进制 ...
- mt19937 用法
老是忘记怎么用,自己写一个用作备忘录吧. 首先需要的头文件: #include <random> 或者是 #include <bits/stdc++.h> //万能头 yyds ...
- 『现学现忘』Git后悔药 — 30、版本回退git reset --hard命令说明
git reset --hardcommit-id命令:回退到指定版本.(hard:强硬,严格的回退) 该命令不仅移动了分支中HEAD指针的位置,还将工作区和暂存区中数据也回退到了指定的版本. (提示 ...
- react antd上拉加载与下拉刷新与虚拟列表使用
创建项目 create-react-app antdReact 安装:antd-mobile.react-virtualized npm i antd-mobile -S npm i react-vi ...