vue的挂载流程与生命周期

vue的挂载流程
首先看看图

<div id="app">        
	{{ msg }}    
div>    
<script>          
var vm = new Vue({            
	el:"#app",            
	template:"
{{ msg }}
",//替换模板            
	render(createElement){                
		return createElement("h1",{  //走渲染可以修改，如果不写则按照原本的渲染                    
			class:"asdjfkadfkjhkahdf",                    
			style:{                        
				color:"yellow",                        
				fontSize:"50px"                    
			},                    
			// domProps:{//这个权重太大，写了也不属于vnode结构中，写了以后也不能在写子节点                    
			//     innerHTML : "QWERTTYUUUUOOUOOO"                    
			// }                
		},["ASTrender修改的h1",createElement("p","p标签")])            
	},            
	data:{                
		msg : "24525"            
	},            
	methods:{                
		abc(){}            
	}        
})  
//vm.$mount("#app")//挂载        
script>

首先判断是否有el 有就看是否有template替换模板没有就把当前元素div#app.outerHTML(

{{ msg }}

)作为模板 —> AST —> render走渲染可以修改，如果不写则按照原本的渲染 —> Vnode—>真实dom
没有el就去看是否存在vm.$mount( )挂载 没有就结束 有挂载就继续上面的过程。

权重值：render > template > el

vue的生命周期
首先先看看官网的图，详细的给出了vue的生命周期:

它可以总共分为8个阶段：
beforeCreate（创建前） : 在实例初始化之后，数据观测(data observer，开始监控Data对象数据变化)和初始化事件(init event，Vue内部初始化事件)之前被调用。
created（创建后） : 在实例已经创建完成之后被调用。实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，event事件回调。挂载阶段尚未开始，$el 属性不可见。
beforeMount(载入前)：在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后）：在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中，此时一般可以做一些Ajax操作。注意mounted只会执行一次。
beforeUpdate（更新前） : 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） : 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） : 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） : 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

 <div id="app">        
 	{{ name }}    
 div>    
 <script>        
 	var vm = new Vue({            
 		el:"#app",            
		data:{                
			 name : "dyx",                
			 age : 25,                
			 msg : "长得帅",            
		 },            
	 	beforeCreate(){                
			 console.log("beforeCreate")                
			 console.log(this)                
			 console.log(this.$data)            
 		},            
	 	created(){//创建注册                
			 console.log("created")                
			 console.log(this.$data)               
			  // 此时已经拿到了值，但是没有渲染，所以可以调用ajax获取数据           
	  	},            
	  	beforeMount(){//输出模板，没有进行渲染                
			  console.log("beforeMount")                
			  console.log(this)                
			  console.log(this.$data)                
			  console.log(this.$el)            
	 	 },           
   		mounted(){                
			   // ajax                
			   console.log(this.$el)            
  		},           
    		beforeUpdate(){                
 			console.log("beforeUpdate")            
    		},            
    		updated(){                
    			console.log("updated")            
    		},            
    		beforeDestroy(){                
    			console.log("beforeDestroy")            
    		},           
     		destroyed(){               
	      		console.log("destroyed")                
	      		// vm.$destroy()   还是可以看到vue的实例，但是修改数据页面不变，因为被卸载了            
      		}	        
	})
script>