提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

超详细vue生命周期解析(详解)深入理解

Vue 详解 解析 详细 深入 理解 生命周期
2023-09-14 09:04:07 时间

实例1：

代码：

<template>
  <div class="index-wrap">
    <el-input v-model="message" placeholder="请输入内容"></el-input>
    <p>{{ message }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      message: 'Today is Friday! ha-ha'
    }
  },
  methods: {
  },
  beforeCreate: function() {
    console.group('beforeCreate 创建前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) //undefined
    console.log('%c%s', 'color:red', 'message: ' + this.message)
    console.log('el.innerHTML : ' + this.$el.innerHTML)
  },
  created: function() {
    console.group('created 创建完毕状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el) //undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data) //已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message) //已被初始化
    console.log('el.innerHTML : ' + this.$el.innerHTML)
  },
  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) //已被初始化
    console.log('el.innerHTML : ' + this.$el.innerHTML)
  },
  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) //已被初始化
    console.log('el.innerHTML : ' + this.$el.innerHTML)
  },
  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)
    console.log('el.innerHTML : ' + this.$el.innerHTML)
  },
  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)
    console.log('el.innerHTML : ' + this.$el.innerHTML)
  },
  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)
    console.log('el.innerHTML : ' + this.$el.innerHTML)
  },
  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)
    console.log('el.innerHTML : ' + this.$el.innerHTML)
  }
}
</script>

<style scoped>

</style>



只刷新，不改变数据时：

 

输入1之后：（注意观察，更新前没有1，更新后的打印值有1了）

 

资料：

vue生命周期图示中英文版Vue实例生命周期钩子 - 大自然的流风 - 博客园vue生命周期图示中英文版Vue实例生命周期钩子。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，https://www.cnblogs.com/zdz8207/p/vue-lifecycle.html

vue生命周期的理解_小毛驴的博客-CSDN博客_vue生命周期Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。https://blog.csdn.net/haochangdi123/article/details/78358895?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163815435716780274137714%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163815435716780274137714&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-78358895.pc_search_mgc_flag&utm_term=vue+%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F&spm=1018.2226.3001.4187

实例2：

超详细vue生命周期解析(详解)_ら陈佚晨的博客-CSDN博客_vue生命周期vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看首先，生命周期是个啥？借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。语述了解之前，我们先贴上一张官网的.https://blog.csdn.net/weixin_42707287/article/details/111641286?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163815616116780274191108%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163815616116780274191108&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~hot_rank-1-111641286.pc_search_mgc_flag&utm_term=vue+%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F&spm=1018.2226.3001.4187

实例3：

代码：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style>

		</style>
	</head>

	<body>
		<div id="app">
			<h1>{{data}}</h1>
		</div>
	</body>

	<script>
		var myVue = new Vue({
			el: "#app",
			data: {
				data: "aaaaa",
				info: "nono"
			},
			beforeCreate: function() {
				console.log("创建前========")
				console.log(this.data)
				console.log(this.$el)
			},
			created: function() {
				console.log("已创建========")
				console.log(this.info)
				console.log(this.$el)
			},
			beforeMount: function() {
				console.log("mount之前========")
				console.log(this.info)
				console.log(this.$el)
			},
			mounted: function() {
				console.log("mounted========")
				console.log(this.info)
				console.log(this.$el)
			},
			beforeUpdate: function() {
				console.log("更新前========");

			},
			updated: function() {
				console.log("更新完成========");
			},
			beforeDestroy: function() {
				console.log("销毁前========")
				console.log(this.info)
				console.log(this.$el)
			},
			destroyed: function() {
				console.log("已销毁========")
				console.log(this.info)
				console.log(this.$el)
			}
		})
	</script>

</html>

将上面的代码复制粘贴运行。在控制台可以看见创建前后，和挂载前后：

我们可以看见。挂载前data是虚拟的，挂载后才是真实的data

然后我们在控制台输入：myVue.data='bbb' 促使数据更新，然后再看控制台：

页面上之前是a更新后变成了b

然后我们继续输入：myVue.$destroy()再看控制台：可以看到销毁前后：

资料：

Vue生命周期 - 浅白 - 博客园https://www.cnblogs.com/gagag/p/6246493.html

相关文章