对于vue生命周期钩子函数的理解

最新推荐文章于 2021-01-14 17:19:33 发布

jia109014

最新推荐文章于 2021-01-14 17:19:33 发布

阅读量169

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/jia109014/article/details/105082457

版权

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",           
   },
   </script>

beforeCreate
：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
beforeCreate(){
console.log(“创建前：”);
console.log(this. $e l); c o n s o l e . l o g (t h i s .$ data);
},
2.created：
created(){
console.log(“创建完成：”);
console.log(this. $e l); c o n s o l e . l o g (t h i s .$ data);
},
3.beforeMounte：在挂载开始之前被调用：相关的 render 函数会被调用。
beforeMount(){
console.log(“挂载前：”);
console.log(this. $e l); c o n s o l e . l o g (t h i s .$ data);
},
4.mounted：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行
mounted(){
console.log(“挂载完成：”);
console.log(this. $e l); c o n s o l e . l o g (t h i s .$ data);
},
5.beforeUpdate：修改data里的数组，会引起死循环
beforeUpdate(){
console.log(’=即将更新渲染=’);
let name = this. $KaTeX parse error: Expected 'EOF', got '}' at position 86: \dots }̲, 6.updated： up\dots$ refs.app.innerHTML;
console.log(‘name:’+name);
},

jia109014

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对于vue生命周期钩子函数的理解

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

扫一扫