Vue-生命周期

来源：化拓教育网

Vue的生命周期

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

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：

<!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操作数据，因为即便操作数据，也不会再触发更新流程了。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文