Vue的生命周期与钩子函数

最新推荐文章于 2024-07-28 11:33:04 发布

暴龙战士sama

最新推荐文章于 2024-07-28 11:33:04 发布

阅读量149

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Lxm_unusual/article/details/105099599

版权

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);            
         },

暴龙战士sama

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的生命周期与钩子函数

1.beforeCreate：在这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作； <!doctype html> <html lang="en"> <head> <meta charset="UT...
复制链接

扫一扫