• vue.js生命周期函数

    Vue生命周期

    • beforecreate : 举个例子：可以在这加个loading事件
    • created ：在这结束loading，还做一些初始化，实现函数自执行
    • mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
    • beforeDestory： 你确认删除XX吗？
    • destoryed ：当前组件已被删除，清空相关内容

    在这里插入图片描述

    代码

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>vue生命周期title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<h2>{{message}}h2>
		div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					message:"xiaonaihu"
				},
				beforeCreate: function(){
				    console.group('beforeCreate 创建前状态===============》');
				    console.log("%c%s", "color:red" , "el     : " + this.$el);
				    console.log("%c%s", "color:red","data   : " + this.$data);
				    console.log("%c%s", "color:red","message: " + this.message);  
				},
				created: function(){
				    console.group('created 创建完毕状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log("%c%s", "color:red","data   : " + this.$data);
				    console.log("%c%s", "color:red","message: " + this.message);
				},
				beforeMount: function(){
				    console.group('beforeMount 挂载前状态===============》');
				    console.log("%c%s", "color:red","el     : " + (this.$el));
				    console.log(this.$el);
				    console.log("%c%s", "color:red","data   : " + this.$data);
				    console.log("%c%s", "color:red","message: " + this.message);
				},
				mounted: function(){
				    console.group('mounted 挂载结束状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el);    
				    console.log("%c%s", "color:red","data   : " + this.$data);
				    console.log("%c%s", "color:red","message: " + this.message);
				},
				beforeUpdate: function(){
				    console.group('beforeUpdate 更新前状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el);   
				    console.log("%c%s", "color:red","data   : " + this.$data); 
				    console.log("%c%s", "color:red","message: " + this.message); 
				},
				updated: function(){
				    console.group('updated 更新完成状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el); 
				    console.log("%c%s", "color:red","data   : " + this.$data); 
				    console.log("%c%s", "color:red","message: " + this.message); 
				},
				beforeDestroy: function(){
				    console.group('beforeDestroy 销毁前状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el);    
				    console.log("%c%s", "color:red","data   : " + this.$data); 
				    console.log("%c%s", "color:red","message: " + this.message); 
				},
				destroyed: function(){
				    console.group('destroyed 销毁完成状态===============》');
				    console.log("%c%s", "color:red","el     : " + this.$el);
				    console.log(this.$el);  
				    console.log("%c%s", "color:red","data   : " + this.$data); 
				    console.log("%c%s", "color:red","message: " + this.message)
				}
			});
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
  • 相关阅读:
    Webrtc丢包率的计算
    原子类在多线程编程中的重要性
    【动画笔记】数据结构-AVL树的插入操作
    画家-qt-surce
    java中的泛型
    java ssm旅游景点景区门票预订及信息发布系统
    LeetCode 2. 两数相加
    【JavaWeb】ServletContext配置信息
    前端工程化-什么是构建工具
    通过v_COURSE和V_grade查看期末平均成绩在60分以上的课程名称
  • 原文地址：https://blog.csdn.net/weixin_55804957/article/details/128169820