Vue-生命周期

于 2024-09-10 20:30:17 发布
阅读量986 收藏 20
点赞数 33
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63563047/article/details/142102444
版权

Vue的生命周期

Vue 实例从创建到销毁的过程中的一系列阶段。每个阶段都有相应的生命周期钩子，可以在这些钩子中执行特定的操作。Vue 的生命周期主要包括以下几个阶段：

  1. 创建阶段：

    • beforeCreate: 实例刚被创建，数据观测和事件配置尚未进行，即无法通过vm访问到data中的数据配以及methods中的方法。
    • created: 实例已经创建完成，数据观测和事件配置已完成，此时可以通过vm访问到数据和methods中配置方法。

  2. 挂载阶段：

    • beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用，页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。
    • mounted: 实例挂载后调用，此时对 DOM 的操作均有效（尽可能避免），至此初始化过程结束，一般在此进行：开启定时器，发送网络请求，订阅消息，绑定自定义时间等初始化操作。

  3. 更新阶段：

    • beforeUpdate: 实例更新之前调用，数据更新但 DOM 尚未更新，即数据是新的，但页面是旧的。
    • updated: 实例更新后调用，此时 DOM 已经更新，即数据是新的，页面也是新的，页面和数据保持同步。

  4. 销毁阶段：

    • beforeDestroy: 实例销毁之前调用，此时，vm中所有的data，methods，指令等都处于可用状态，马上要执行销毁过程，此处虽然可以访问数据、调用方法，但是对数据的更改将不会触发更新操作。一般在此阶段，执行关闭定时器，取消订阅消息，解绑自定义事件等收尾操作。
    • destroyed: 实例已经被销毁，所有的时间监听和子实例都会被清理掉。

Vue生命周期原理图

 

Vue生命周期各阶段

创建阶段（beforeCreate与created）

beforeCreate：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
    			add(){
    				console.log('add')
    				this.n++
    			},
    		},
    		beforeCreate() {
    			console.log('beforeCreate')
                console.log(this)  //生命周期里面的this都是vm
                debugger;  //debugger  是 JavaScript 中的一个关键字，用于在代码中设置调试点。当代码执行到  debugger  语句时，如果浏览器的开发者工具处于打开状态，代码会暂停执行。
    		},
    		// created() {
    		// 	console.log('created')
    		// },
    		// beforeMount() {
    		// 	console.log('beforeMount')
    		// },
    		// mounted() {
    		// 	console.log('mounted')
    		// },
    		// beforeUpdate() {
    		// 	console.log('beforeUpdate')
    		// },
    		// updated() {
    		// 	console.log('updated')
    		// },
    		// beforeDestroy() {
    		// 	console.log('beforeDestroy')
    		// },
    		// destroyed() {
    		// 	console.log('destroyed')
    		// },
    	})
    </script>

</html>

可以观测到，beforeCreate，此时vue实例下没有_data以及methods方法，vue实例下许多都是undefined，null，false，数据监测、数据代理还未开始。并且生命周期里的this都是vm。

 

created：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
    			add(){
    				console.log('add')
    				this.n++
    			},
    		},
    		beforeCreate() {
    			console.log('beforeCreate')
    		},
    		created() {
    			console.log('created')
                console.log(this)  //this指向vue实例对象
                debugger;
    		},
    		// beforeMount() {
    		// 	console.log('beforeMount')
    		// },
    		// mounted() {
    		// 	console.log('mounted')
    		// },
    		// beforeUpdate() {
    		// 	console.log('beforeUpdate')
    		// },
    		// updated() {
    		// 	console.log('updated')
    		// },
    		// beforeDestroy() {
    		// 	console.log('beforeDestroy')
    		// },
    		// destroyed() {
    		// 	console.log('destroyed')
    		// },
    	})
    </script>

</html>

 此时，vue实例对象中出现_data、methods方法，数据监视以及数据代理完成。

 挂载阶段（beforeMount与mounted）

 beforeMount：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
    			add(){
    				console.log('add')
    				this.n++
    			},
    		},
    		beforeCreate() {
    			console.log('beforeCreate')
    		},
    		created() {
    			console.log('created')
    		},
    		beforeMount() {
    			console.log('beforeMount')
                console.log(this)  //this指向vue实例对象
                debugger;
    		},
    		// mounted() {
    		// 	console.log('mounted')
    		// },
    		// beforeUpdate() {
    		// 	console.log('beforeUpdate')
    		// },
    		// updated() {
    		// 	console.log('updated')
    		// },
    		// beforeDestroy() {
    		// 	console.log('beforeDestroy')
    		// },
    		// destroyed() {
    		// 	console.log('destroyed')
    		// },
    	})
    </script>

</html>

此时呈现的页面是未经编译的DOM结构，对DOM的操作不奏效。

mounted：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
    			add(){
    				console.log('add')
    				this.n++
    			},
    		},
    		beforeCreate() {
    			console.log('beforeCreate')
    		},
    		created() {
    			console.log('created')
    		},
    		beforeMount() {
    			console.log('beforeMount')
    		},
    		mounted() {
    			console.log('mounted')
                console.log(this)  //this指向vue实例对象
                debugger;
    		},
    		// beforeUpdate() {
    		// 	console.log('beforeUpdate')
    		// },
    		// updated() {
    		// 	console.log('updated')
    		// },
    		// beforeDestroy() {
    		// 	console.log('beforeDestroy')
    		// },
    		// destroyed() {
    		// 	console.log('destroyed')
    		// },
    	})
    </script>

</html>

 vue生命周期-mounted,此时页面呈现的是经过vue编译的DOM。对DOM的操作有效，至此初始化过程结束，一般在此进行开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。

 更新阶段（beforeUpdate与updated）

 beforeUpdate：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
    			add(){
    				console.log('add')
    				this.n++
    			},
    		},
    		beforeCreate() {
    			console.log('beforeCreate')
    		},
    		created() {
    			console.log('created')
    		},
    		beforeMount() {
    			console.log('beforeMount')
    		},
    		mounted() {
    			console.log('mounted')
    		},
    		beforeUpdate() {
    			console.log('beforeUpdate')
                console.log(this.n)
                debugger
    		},
    		// updated() {
    		// 	console.log('updated')
    		// },
    		// beforeDestroy() {
    		// 	console.log('beforeDestroy')
    		// },
    		// destroyed() {
    		// 	console.log('destroyed')
    		// },
    	})
    </script>

</html>

此时数据是新的，页面是旧的，页面与数据尚未保持同步。

updated：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
    			add(){
    				console.log('add')
    				this.n++
    			},
    		},
    		beforeCreate() {
    			console.log('beforeCreate')
    		},
    		created() {
    			console.log('created')
    		},
    		beforeMount() {
    			console.log('beforeMount')
    		},
    		mounted() {
    			console.log('mounted')
    		},
    		beforeUpdate() {
    			console.log('beforeUpdate')
    		},
    		updated() {
    			console.log('updated')
                console.log(this.n)
                debugger
    		},
    		// beforeDestroy() {
    		// 	console.log('beforeDestroy')
    		// },
    		// destroyed() {
    		// 	console.log('destroyed')
    		// },
    	})
    </script>

</html>

vue生命周期-updated，此时数据与页面都是新的，即数据与页面同步。

销毁阶段（beforeDestroy与destroy）

vm.$destroy()

当调用vm.$destroy()时，会完全销毁vue实例对象，清理它与其他组件实例对象的连接，解绑它的全部指令以及自定义事件监听器，触发beforeDestroy和desdroyed生命周期函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
            <h2 v-text="n"></h2> //此处的v-text指令不在奏效
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁Vue实例对象</button>

		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
			add(){
				console.log('add')
				this.n++
			},
			bye(){
				console.log('bye！！！')
				this.$destroy()
			}
    	},
    		beforeCreate() {
    			console.log('beforeCreate')
    		},
    		created() {
    			console.log('created')
    		},
    		beforeMount() {
    			console.log('beforeMount')
    		},
    		mounted() {
    			console.log('mounted')
    		},
    		beforeUpdate() {
    			console.log('beforeUpdate')
    		},
    		updated() {
    			console.log('updated')
    		},
    		// beforeDestroy() {
    		// 	console.log('beforeDestroy')
    		// },
    		// destroyed() {
    		// 	console.log('destroyed')
    		// },
    	})
    </script>

</html>

 此时，解绑的是自定义事件，而不是原生DOM事件，所以这里的add还可以点击，但不会产生效果。

beforeDestroy:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
            <h2 v-text="n"></h2>
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁Vue实例对象</button>

		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
			add(){
				console.log('add')
				this.n++
			},
			bye(){
				console.log('bye！！！')
				this.$destroy()
			}
    	},
        watch:{
			n(){
				console.log('n改变了')
            }
			},
    		beforeCreate() {
    			console.log('beforeCreate')
    		},
    		created() {
    			console.log('created')
    		},
    		beforeMount() {
    			console.log('beforeMount')
    		},
    		mounted() {
    			console.log('mounted')
    		},
    		beforeUpdate() {
    			console.log('beforeUpdate')
    		},
    		updated() {
    			console.log('updated')
    		},
    		beforeDestroy() {
    			console.log('beforeDestroy')
                console.log(this.n)
                this.add()
    		},
    		destroyed() {
    			console.log('destroyed')
    		},
    	})
    </script>

</html>

 vue生命周期-beforeDestroy，此阶段vm中的所有data、methods、指令都处于可用状态，马上要执行销毁过程。这里的add()方法虽然可以点击，但是不会生效，即虽然可以访问数据、调用方法，但对数据的更改将不会触发更新。

destroyed:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>vue生命周期</title>
<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root" :x="n">
            <h2 v-text="n"></h2>
			<h2>当前的n值是：{{n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁Vue实例对象</button>

		</div>
	</body>

    <script type="text/javascript">
    	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        Vue.config.devtools = true
    	new Vue({
    		el:'#root',
    		data:{
    			n:1
    		},
    		methods: {
			add(){
				console.log('add')
				this.n++
			},
			bye(){
				console.log('bye！！！')
				this.$destroy()
			}
    	},
        watch:{
			n(){
				console.log('n改变了')
            }
			},
    		beforeCreate() {
    			console.log('beforeCreate')
    		},
    		created() {
    			console.log('created')
    		},
    		beforeMount() {
    			console.log('beforeMount')
    		},
    		mounted() {
    			console.log('mounted')
    		},
    		beforeUpdate() {
    			console.log('beforeUpdate')
    		},
    		updated() {
    			console.log('updated')
    		},
    		beforeDestroy() {
    			console.log('beforeDestroy')
                console.log(this.n)
                this.add()
    		},
    		destroyed() {
    			console.log('destroyed')
    		},
    	})
    </script>

</html>

Vue生命周期总结

常用的生命周期函数：

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

  • 销毁后借助Vue开发者工具看不到任何信息。
  • 销毁后自定义事件会失效，但原生DOM事件依然有效。
  • 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

 

殊序
关注
Vue-生命周期-axios
欢迎
06-09 494
3.挂载阶段 1.template选项检查有 - 编译template返回render渲染函数无 – 编译el选项对应标签作为template(要渲染的模板)2.虚拟DOM挂载成真实DOM之前3.beforeMount – 生命周期钩子函数被执行4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上5.真实DOM挂载完毕6.mounted – 生命周期钩子函数被执行 4.更新阶段 1.当data里数据改变, 更新DOM之前2.beforeUpdate – 生命周期钩子函数被执行3.Vir
Vue-生命周期（函数）
weixin_52075223的博客
03-24 3633
1.什么是生命周期？ Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期，通过vue的生命周期我们可以在不同的阶段进行实现不同的逻辑处理，也是vue框架的数据间的交互通信。其实现在看来也没那么难，但是vue的源码实现这一套机制那是难得一逼，涉及到复杂的算法如diff算法。 new Vue({ router, store, render: h
Vue生命周期
05-18
Vue相关
vue生命周期
热门推荐
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
vue 的生命周期简解
Headertext的博客
12-27 263
生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段， 挂载阶段，更新阶段，销毁阶段 分别有： 创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数 创建后：created() 是最早使用data和methods中数据的钩子函数 挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树 挂载后：Mounted() 渲染完毕页面和内存的数据已经同步 更新前：beforeUpdate() 当data的数据发生改变会执行这个钩子...
vue-生命周期+工程化开发(三)-小黑记账单
最新发布
02-11
在Vue.js框架中，"生命周期"是指一个Vue实例从创建到销毁的过程，它涉及到一系列的初始化、更新和销毁阶段。了解Vue的生命周期对于优化代码、解决问题以及深入理解组件的工作原理至关重要。在这个“vue-生命周期+...
vue3.0 vue-quill-editor.rar
09-19
在实际开发中，可能会遇到Vue3.0与Vue-Quill-Editor的兼容性问题，例如生命周期钩子的变化、Prop类型检查的更新等。这时，需要查阅官方文档或社区资源，寻找相应的解决方案。对于Vue CLI 3，要确保项目的构建配置...
vue 八大生命周期
m0_57138227的博客
10-20 6万+
1. beforeCreate（创建前） 2. created （创建后） 3. beforeMount (载入前) 4. mounted （载入后） 5. beforeUpdate （更新前） 6. updated （更新后） 7. beforeDestroy（ 销毁前） 8. destroyed （销毁后）
vue 生命周期
blessing
05-13 97
Vue 生命周期 1、beforeCreate 创建实例之前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。 2、created 创建实例成功 data和methods都已经初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早可以在这个阶段中操作。 3、beforeMount 渲染DOM之前 执行到这个钩子的时候，在内存
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值