7.vue文档API（5），destroyed的销毁阶段与key属性

最新推荐文章于 2025-06-19 17:32:27 发布

「已注销」

最新推荐文章于 2025-06-19 17:32:27 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue简介文章标签： vue

本文链接：https://blog.csdn.net/weixin_47870554/article/details/107245336

vue简介专栏收录该内容

14 篇文章

订阅专栏

本文探讨Vue中$destroy方法触发的数据与DOM关系的销毁，以及特殊属性key如何影响生命周期。点击销毁按钮，尽管函数与DOM的响应式关系被销毁，但函数仍然可触发。在更改key时，Vue实例并未销毁重建，仅触发updated生命周期，说明key影响的是DOM元素的唯一性，而非vue实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介:

vue的销毁，销毁的不是相关元素，甚至vue实例也没有被销毁，而是数据与dom关系。

销毁调用的方法：

触发销毁的函数，调vue实例对象的$destroy函数即可。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vueTest</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="test">
	</div>
	<script type="text/javascript">	
		Vue.config.productionTip = false;
		var test = new Vue({
			el: '#test',
			data:{
				message: 'Hello Vue!',
			},
			methods: {
				messageChange(){
					console.log('函数 messageChange')
					this.message = 'hi, $destroy';
				},
				$destroyChange() {
					console.log('函数 $destroyChange')
					this.$destroy();
				},
			},
			template: `
				<div>
					<h1>{{message}}</h1>
					<button v-on:click='messageChange'>更改文本</button>
					<button v-on:click='$destroyChange'>销毁</button>
				</div>
			`,
			beforeCreate: function(){
				console.log('创建之前');
			},
			created: function(){
				console.log('创建');
			},
			beforeMount: function(){
				console.log('挂载之前');
			},
			mounted: function(){
				console.log('挂载');
			},
			beforeUpdate: function(){
				console.log('更新之前');
			},
			updated: function(){
				console.log('更新');
			},
			beforeDestroy: function(){
				console.log('销毁之前');
			},
			destroyed: function(){
				console.log('销毁');
			},
		});
	</script>
</body>
</html>

点击更改文本，Hello Vue!被更改；点击销毁，触发销毁生命周期。

反过来操作，可以发现，点击按钮的话，函数虽然被销毁了，但是函数会被触发，只是与dom元素的响应式关系已经被销毁了，数据的改变，已经无法影响到dom元素了。

特殊属性key与生命周期：

在vue中，对元素的渲染，有一个特殊属性，key来表示元素的独一无二。如果对key进行更改的话，触发的生命周期，会是销毁还是更新？代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vueTest</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="test">
	</div>
	<script type="text/javascript">	
		Vue.config.productionTip = false;
		var keyEle ,
			test = new Vue({
			el: '#test',
			data:{
				message: 'Hello Vue!',
				key: 0,
			},
			methods: {
				ifEqual(){
					alert(keyEle === document.getElementById('key'));
				},
				keyChange(){
					console.log('函数 keyChange')
					this.key ++;
				},
				messageChange(){
					console.log('函数 messageChange')
					this.message = 'hi, $destroy';
				},
				$destroyChange() {
					console.log('函数 $destroyChange')
					this.$destroy();
				},
			},
			template: `
				<div>
					<h1 id='key' v-bind:key='key'>{{message}}</h1>
					<button v-on:click='keyChange'>更改key</button>
					<button v-on:click='messageChange'>更改文本</button>
					<button v-on:click='$destroyChange'>销毁</button>
					<button v-on:click='ifEqual'> == ?</button>
				</div>
			`,
			beforeCreate: function(){
				console.log('创建之前');
			},
			created: function(){
				console.log('创建');
			},
			beforeMount: function(){
				console.log('挂载之前');
			},
			mounted: function(){
				console.log('挂载');
				keyEle = document.getElementById('key');
			},
			beforeUpdate: function(){
				console.log('更新之前');
			},
			updated: function(){
				console.log('更新');
			},
			beforeDestroy: function(){
				console.log('销毁之前');
			},
			destroyed: function(){
				console.log('销毁');
			},
		});
	</script>
</body>
</html>