Vue的生命周期与钩子函数-CSDN博客

本文深入解析Vue.js的生命周期，从beforeCreate到updated阶段，详细阐述了每个钩子函数的执行时机和应用场景，帮助开发者理解Vue组件的加载和渲染过程。

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

1.beforeCreate：

在这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；

 <!doctype html>
 <html lang="en">
 <head>    
 <meta charset="UTF-8">    
 <title>Document</title>    
 <script src="vue.js"> </script>
 </head>
 <body>    
 <div id="app" ref="app">        
 {{ name }}    
 </div>
 </body>
 <script>        
 let vm=new Vue({           
  el:"#app",            
  data:{                
  name:"liuti",           
   },

1. beforeCreate：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；

 beforeCreate(){               
 console.log("创建前：");               
 console.log(this.$el);               
  console.log(this.$data);            
  },
2.created：
	 created(){       
	          console.log("创建完成：");                
	          console.log(this.$el);                
	          console.log(this.$data);            
	          },
3.beforeMounte：在挂载开始之前被调用：相关的 render 函数会被调用。
 beforeMount(){        
         console.log("挂载前：");                
         console.log(this.$el);                
         console.log(this.$data);            
         },
 4.mounted：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作
 在此时才能正常进行:
 mounted(){        
         console.log("挂载完成：");                
         console.log(this.$el);                
         console.log(this.$data);            
         },  
 5.beforeUpdate：修改data里的数组，会引起死循环
  beforeUpdate(){        
          console.log('=即将更新渲染=');                
          let name = this.$refs.app.innerHTML;                
          console.log('name:'+name);            
          },
 6.updated：
 updated(){        
         console.log('==更新成功==');                
         let name = this.$refs.app.innerHTML;                
         console.log('name:'+name);            
         },