Vue学习日记之vue实例生命周期
2024-04-27 05:28:06
在vue实例开始创建、运行到销毁的过程，就是vue的生命周期
vue生命周期中发生（存在）的事件（这些事件可以用函数来表示），我们称之为生命周期钩子。
即：生命周期钩子=生命周期函数=生命周期事件。
我们看vue官网中存在着这么一张图片，详细的描述了vue的生命周期
1、开始阶段：
new Vue({})---------------------开始创建vue实例
Init events&Lifecycle--------此时的vue实例为空，什么都没有，只有默认的一些生命周期和 默认的事件，此时的data，methods，el等等都不存在，还没有初始 化数据
beforeCreate()钩子函数运行，但是此时的vue是一个空壳。我们尝试使用beforeCreate函数输出data和methods中的数据，看看会怎么样。
var vm=new Vue({el:"#app",data:{msg:"hhh"},filters:{ //过滤器},directives:{ //自定义指令},methods:{ //方法show:function () {console.log("你好");}},beforeCreate(){console.log(this.msg);this.show();}})运行结果：
我们可以看到beforeCreate()钩子函数，输出data和methods中的数据时都显示未定义，可见得beforeCreate钩子函数在实例初始化数据之前，就被调用了。
1.1、初始化数据阶段：
init injections&reactivity--------------这个阶段的vue实例不再是空壳了，在它内部已经初始 化了数据和事件，包括data和methods，但是还没编译模板
created()钩子函数运行，此时你可以使用created钩子函数获取到vue中初始化的数据，在这里是你最早可以获取到数据的地方，可以更改数据而不会触update和其他的钩子函数。一般在这个钩子函数中进行初始化数据的获取。
var vm=new Vue({el:"#app",data:{msg:"hhh"},filters:{ //过滤器},directives:{ //自定义指令},methods:{ //方法show:function () {console.log("你好");}},/* beforeCreate(){ //这是第一个钩子函数运行在实例被完全创建之前，刚创建完一个空的vue实例就会触发beforeCreate函数console.log(this.msg);this.show();}*/created(){console.log(this.msg);this.show();}})运行结果
created()钩子函数可以输出data和methods中的数据，证明数据已经在vue实例中初始化完毕。
1.2、编译模板阶段
从creatd()钩子函数到beforeMount钩子函数之间称之为编译模板阶段，此时模板编译成功，生成了一个编译好的模板字符串，在内存中将这个模板字符串渲染为内存中的DOM，但是还在内存中，没有挂载到页面中。
beforeMount钩子函数是可以在渲染前最后一次获取到vue中的数据，
<div id="app"><h3 id="h3"></h3>
</div></body>
<script>var vm=new Vue({el:"#app",data:{msg:"hhh"},filters:{ //过滤器},directives:{ //自定义指令},methods:{ //方法show:function () {console.log("你好");}},beforeMount(){document.getElementById('h3').innerText="改变";}})
</script>运行结果：
从上可以看到，我们在beforeMount()钩子函数中，更改页面上的h3元素内容，发现修改不成功，原因是beforeMount()钩子函数是触发在编译阶段的，此时还没搭载到页面上，就无法对页面上的元素和内容进行修改。
beforeMount()钩子函数，是位于编译模板阶段的钩子函数，在这里可以进行一般数据的获取和更改，同 created() 函数一样更改数据不会触发update和其他钩子函数，这个阶段是在内存中生成了虚拟DOM还没有挂载到页面中！！！
1.3、挂载（渲染真实DOM）页面阶段：
Create vm.$el and replace "el" with it-------之前是编译阶段，在内存中生成的是虚拟的DOM，还没挂载到页面上，编译模板阶段之后就是挂载阶段，此时在内存中的虚拟DOM挂载到了浏览器的页面上！！！我们可以操作页面上的DOM元素了！
mounted()钩子函数发生在此阶段，此时的vue实例已经被渲染到页面上，用户可以看到vue实例的页面，我们可以操作DOM等。
<div id="app"><h3 id="h3"></h3>
</div></body>
<script>var vm=new Vue({el:"#app",data:{msg:"hhh"},filters:{ //过滤器},directives:{ //自定义指令},methods:{ //方法show:function () {console.log("你好");}},mounted(){document.getElementById('h3').innerText="我们在mounted中改变了真实的DOM";}})
</script>运行结果：
mounted()钩子函数是实例在创建期间的最后一个钩子函数，它可以操作真实的DOM（它是最早可以操作DOM的函数），此时的实例已经被完全创建出来，如果我们对实例没有任何操作的话，那么这个实例就在内存中，什么也不发生。
2、运行阶段
在mounted()钩子函数之后，vue实例已经创建完毕了，此刻它就静静躺在内存中，进入到运行阶段。
这个运行阶段有两个钩子函数，只有当data中的数据发生改变时，才会触发。
当vue实例中的data改变时，它不是及时渲染到页面上的，而是在内存中对之前的虚拟DOM中的data数据进行更改，生成新的虚拟DOM之后才会挂载（渲染）到页面上，
beforeUpdate()钩子函数---------------更改data数据后，当虚拟DOM中的data发生改变时触发，此时 虚拟DOM没有加载到页面上。页面上的数据不变，虚拟DOM中 的数据改变。
<div id="app"><h3 id="h3">{{ msg }}</h3><input type="button" value="提交" @click="show">
</div></body>
<script>var vm=new Vue({el:"#app",data:{msg:"原始的"},methods:{show:function () {this.msg="改变了";console.log(this.msg);}},beforeUpdate(){console.log("获取页面上的msg"+document.getElementById('h3').innerText);console.log("更改之后的msg"+this.msg);}})</script>运行截图
我们可以看到在beforeUpdate()钩子函数中，输出页面上h3的内容，输出的还是改变之前的msg，证明此函数只有在data中的数据发生改变，且新生成的虚拟DOM没有挂载（渲染）到页面上。
updated()钩子函数-----------------------更改data数据之后，虚拟DOM中的data发生改变页面上的data 也发生改变（即新生成的虚拟DOM挂载上页面了）
<div id="app"><h3 id="h3">{{ msg }}</h3><input type="button" value="提交" @click="show">
</div></body>
<script>var vm=new Vue({el:"#app",data:{msg:"原始的"},methods:{show:function () {this.msg="改变了";}},updated(){console.log("获取页面上的msg:"+document.getElementById('h3').innerText);console.log("更改之后的msg:"+this.msg);}})</script>运行结果：
可以看到，我们使用updated()钩子函数输出，页面的msg和data中的msg都是一致的，证明，updated()钩子函数的触发时条件是，data数据发生改变且虚拟DOM也挂载到了页面上。
3、销毁阶段
当用户关闭整个页面或者执行了某些$destroy时，就会从运行阶段进入销毁阶段（主要的一大特点是运行了beforeDestroy钩子函数）
销毁阶段有两个钩子函数：
beforeDestroy------------销毁前执行的钩子函数，可以继续使用vue实例中的数据，如data， methods，filters，derictives等等。
destroyed------------------已经销毁了，vue实例中的数据不可用了。
Vue学习日记之vue实例生命周期相关推荐
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子 知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
- vue 生命周期_深入理解Vue实例生命周期
vue实例生命周期与生命周期钩子 每个 Vue 实 例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...
- java 实例的生命周期_[Java教程]Vue实例生命周期
[Java教程]Vue实例生命周期 0 2017-08-15 19:00:09 前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一 ...
- Vue 的属性、方法和生命周期
实例 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&qu ...
- vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- vue中beforeupdate意思_VUE的生命周期之beforeMount、mounted、beforeUpdate、updated
释放双眼,带上耳机,听听看~! beforeMount:渲染前,被vue管理起来的dom在vue实例里还没完成渲染,所以就是还不能访问vue渲染的dom,平时项目中基本用不到,知道有这个是干什么的就行 ...
- Vue学习笔记01——Vue开发基础
一.Vue实例配置选项 选项 说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
- Mini 容器学习笔记4——组件的生命周期(应用篇)
Mini容器支持6中生命周期类型: 1. Singleton :单利类型(缺省组件都是单利类型的生命周期,由容器进行托管的) [Test]public void SingletonLifestyleT ...
- 安卓学习笔记06：Activity生命周期与启动模式
文章目录 零.学习目标 一.Activity生命周期 1.了解Activity生命周期 2.Activity生命周期简化图 (1)Activity存在与否 (2)Activity可见与否 (3)Act ...
最新文章
- 后端怎么防止重复提交？（常用的做法）
- 让创新触手可及，阿里云容器服务 ACK 发行版开放免费下载
- Spring PropertyPlaceholderConfigurer Usage - 使用系统变量替换spring配置文件中的变量
- C语言程序设计--输入与输出
- 解释型语言和编译型语言的区别
- oracle餐饮权,初秋来临，献上餐饮数字化经营的“暖心大餐”
- Python基本操作（三）标准运算符与赋值
- RDMA over TCP的协议栈工作过程浅析
- linux服务器云防火墙配置文件,Linux云服务器防火墙配置之Firewalld
- 怎么把网页转成PDF？
- 【收藏】QCIF、 CIF、2CIF、DCIF、D1（4CIF）格式介绍
- Java基础-面向对象进阶-多态包final权限修饰符代码块
- opencv分别显示彩色图片各通道图片
- VTK_Learning_交互与拾取_点拾取
- DLL无法注入的原因查找
- 【linux基础-1】linux下的快捷键-根目录结构-用户目录
- 从微软官网下载原版Windows10
- vb6.0 Access数据库
- Burp Suite使用介绍（二）
- 计算机合成的音乐后缀,计算机音乐课程――《声音制作与合成基础》