vuejs的生命周期

淡淡的烟草味﹌ 2023-02-24 03:40 73阅读 0赞

代码：

<!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>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

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

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

![20200708084618642.png][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1][]

资料：

[https://www.cnblogs.com/gagag/p/6246493.html][https_www.cnblogs.com_gagag_p_6246493.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20230209/0ae012ad89b14c22981c60a7aaf769c7.png
[20200708084618642.png]: /images/20230209/a3a1e1459d02486a865b930ef5ffe176.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1]: /images/20230209/9f9f4a40c86345ee84d0ffe141c70f4a.png
[https_www.cnblogs.com_gagag_p_6246493.html]: https://www.cnblogs.com/gagag/p/6246493.html