Vue简明实用教程(13)——Vue的生命周期
版权声明
- 本文原创作者:谷哥的小弟
- 作者博客地址:http://blog.csdn.net/lfdfhl
Vue生命周期图示
Vue生命周期详解
理解Vue的生命周期可以帮助我们更好地理解Vue的运行。
生命周期三个阶段
从总体上来讲,Vue的生命周期分为三大阶段:初始化阶段、运行阶段、销毁阶段。
八个生命周期函数
在Vue生命周期的三大阶段中囊括了八个生命周期函数(钩子)。这些生命周期函数不需要开发人员手动调用,而是在整个生命周期过程中自动触发的。
初始化阶段包括以下生命周期函数:
- 1、beforeCreate()
- 2、created()
- 3、beforeMount()
- 4、mounted()
运行阶段包括以下生命周期函数:
- 1、beforeUpdate()
- 2、updated()
销毁阶段包括以下生命周期函数:
- 1、beforeDestroy()
- 2、destroyed()
生命周期函数详解
在此,详解Vue的八个生命周期函数。
beforeCreate()
该函数执行时Vue实例对象仅仅完成自身内部事件和生命周期函数的注入。
created()
该函数执行时Vue实例对象注入el、data、methods、computed等属性并完成对应的校验工作。
beforeMount()
该函数执行时el将执行的html还是一个原始的模板并没有实现数据渲染。
mounted()
该函数执行时Vue已经完成了数据渲染工作。
beforeUpdate()
该函数执行时表示data数据发生了变化,但是页面仍显示的是之前数据并没有更新。
updated()
该函数执行时表示页面数据完成了更新。
beforeDestroy()
该函数执行时表示准备销毁Vue实例。
destroyed()
该函数执行时表示已经销毁了Vue实例。
Vue生命周期示例
在此,以示例形式详解Vue的八个生命周期函数。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue</title><!-- 引入vue --><script src="js/vue.js"></script><script type="text/javascript">// 声明Vue的实例let vueInstance = null;// 入口函数window.onload = function () {// 初始化Vue实例vueInstance=new Vue({el: "#div1",data: {name: "谷哥的小弟"},methods: {},computed:{},//以下是Vue生命周期的初始化阶段beforeCreate(){console.log("beforeCreate:this.name=",this.name);},created(){console.log("created:this.name=",this.name);},beforeMount(){console.log("beforeMount:document.getElementById('myName').innerText=",document.getElementById("myName").innerText);},mounted(){console.log("mounted:document.getElementById('myName').innerText=",document.getElementById("myName").innerText);},// 以下是Vue生命周期的运行阶段beforeUpdate(){console.log("beforeUpdate data:this.name=", this.name);console.log("beforeUpdate view:document.getElementById('myName').innerText=",document.getElementById("myName").innerText);},updated(){console.log("updated data:this.name=", this.name);console.log("updated view:document.getElementById('myName').innerText=",document.getElementById("myName").innerText);},//以下是Vue生命周期的销毁阶段beforeDestroy(){console.log("beforeDestroy");},destroyed(){console.log("destroyed");}});}</script>
</head>
<body><h2 style="color: red;">本文作者:谷哥的小弟</h2><h2 style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2><div id="div1"><h3 id="myName">{{name}}</h3><input type="text" v-model="name"></div>
</body>
</html>
当浏览器刚显示该页面时,可以观测到初始化阶段的生命周期函数:
- 1、beforeCreate()
- 2、created()
- 3、beforeMount()
- 4、mounted()
当修改input输入框中的内容时可观测到运行阶段的生命周期函数:
- 1、beforeUpdate()
- 2、updated()
当在控制台中执行vueInstance.$destroy();
时可观测到销毁阶段的生命周期函数:
- 1、beforeDestroy()
- 2、destroyed()
Vue简明实用教程(13)——Vue的生命周期相关推荐
- Vue简明实用教程(01)——Vue框架入门
版权声明 本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl Vue概述 Vue是一个渐进式的JavaScript框架. 官方网站 https://cn.v ...
- Vue学习(watch、computed、生命周期、filter)- 学习笔记
文章目录 Vue学习(watch.computed.生命周期)- 学习笔记 watch 监听 computed 计算属性 set---动态添加属性 delete---删除 生命周期 filter 过滤 ...
- ts watch路由 参数变化_TypeScript基础(六):TS 在 Vue 中的用法,data,生命周期,methods,computed,props,watch,$emit...
其实 ts 在 vue 的环境下,我们经常用的一个东西就是上一篇博客讲的装饰器. 装饰器一般情况下有三种用途: 1,装饰整个类. 2,装饰某一个方法. 3,装饰某一个属性. 而这三种用途对 vue 来 ...
- 一幅长文细学Vue(十三)——组合式中的生命周期
13 组合式API(四) 摘要:每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM.在此过程中,它也会运行被称为 ...
- Android教程 -06 Activity的生命周期
本篇播客我们重点介绍下如下知识点: 程序启动原理 Activity生命周期 Activity销毁与创建 视频建议采用超清模式观看, 欢迎点击订阅我的优酷 height="498" ...
- 【微信小程序企业级开发教程】页面的生命周期和参数传递
文章目录 1 页面的生命周期 2 参数传递 2.1 第一种method 2.2 第二种method 1 页面的生命周期 2 参数传递 2.1 第一种method 第一个界面代码: 要跳转界面的代码: ...
- 13.7 线程生命周期状态图、线程常用的方法。
package cn.chen.samplethread; import java.lang.*; /* 线程生命周期状态图.线程常用的方法.线程的生命周期:创建状态.等待就绪态.运行状态.阻塞状态. ...
- 前端React教程第二课 React生命周期设计思想
02 为什么 React 16 要更改组件的生命周期?(上) React 生命周期已经是一个老生常谈的话题了,几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍.然而,入门教材在设计上往往 ...
- Vue——进阶(过滤器、数据交互、生命周期、ES6语法)
目录 过滤器 数据交互 生命周期函数 ES6语法 过滤器 1.定义过滤器: (1)局部过滤器: new Vue({el:"#app",filters:{// 写在vue对象里面的过 ...
最新文章
- 德勤发布《中国智能制造分析报告》
- Javascript中的typeof() 与undefined 与undefined
- 带你学python基础:列表List
- JPA入门简介与搭建HelloWorld(附代码下载)
- 【MSTR产品】获取当前登陆用户的login_id
- unity editor下选中GameObject粘贴复制pos信息
- Java中的CopyOnWrite
- SAP ABAP实用技巧介绍系列之 关于View framework处理Before save event的讨论
- @RequestParam用法与@PathVariable用法的区别
- 离散数学之数理逻辑01
- java删除文件夹下的所有文件和文件夹
- 如何在股票软件画波浪?波浪原理?初级应用画线
- 对梯度概念的直观理解
- 【metahumanUE】虚幻引擎面捕动捕调研
- 常见的前端考试面试题目【vue,react,css,six】
- labview简易计算机实验报告,labview 实验报告.doc
- Tuxera ntfs读写插件工具v2022版本 支持macOS15系统
- java lisp_AI编程:5种最流行的人工智能编程语言!
- Kali Linux - 嗅探和欺骗及密码破解工具
- 在Linux中查找文件系统类型的7种方法(ext2,ext3或ext4)