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

  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",           
   },
   </script>
  1. 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 . el); console.log(this. el);console.log(this.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 . el); console.log(this. el);console.log(this.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 . el); console.log(this. el);console.log(this.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 . el); console.log(this. el);console.log(this.data);
    },
    5.beforeUpdate:修改data里的数组,会引起死循环
    beforeUpdate(){
    console.log(’=即将更新渲染=’);
    let name = this.KaTeX parse error: Expected 'EOF', got '}' at position 86: … }̲, 6.updated: up…refs.app.innerHTML;
    console.log(‘name:’+name);
    },
    对于vue生命周期 钩子函数的理解_第1张图片

你可能感兴趣的:(vue,js)