<template> <div> 
讯享网<h2>{{title}}</h2> <ul> <h3>{{num}}</h3> <button @click="num++">+</button> </ul> 
 </div> </template> <script> export default { data() { 
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> { title: </span>"Hello Vue!"<span style="color: rgba(0, 0, 0, 1)">, num:</span>0<span style="color: rgba(0, 0, 0, 1)"> }; 
 }, methods:{ 
讯享网 show(){ console.log(</span>'我是show方法'<span style="color: rgba(0, 0, 0, 1)">); }, 
 }, beforeCreate() { 
console.log(</span>"-------beforeCreate--------"<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> beforeCreate钩子函数在组件创建之前被调用，该函数被调用的时候，props,data,mehtods都没有被创建 该组件的用处不是很大，但地位很高。 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> console.log(</span>"data", <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.msg); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">console.log('props',this.title);</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">this.show();</span> 
  }, created(){
讯享网 
讯享网 console.log(</span>"-------created--------"<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> created钩子函数是在init Injections&amp;Activitys之后被调用，此时已经完成props,data,methods的创建，所以在此处 调用这些方法或方法 模板或者DOM还没有被创建 此钩子函数重要的用途是用来向服务端获取网络请求数据 在此钩子函数之后的钩子中也能完成网络请求，但是一般都是在这里完成** </span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.show(); 
 }, beforeMount(){ 
console.log(</span>'-------beforeMount--------'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 该钩子函数之前的环节主要工作是将数据读取后填充到模板上，之后有读到内存中暂时存储 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> 
 console.log(‘dom’,document.querySelector(‘h2’)); }, mounted(){ 
讯享网 console.log(</span>'-------mounted--------'<span style="color: rgba(0, 0, 0, 1)">); console.log(</span>'dom',document.querySelector('h2'<span style="color: rgba(0, 0, 0, 1)">)); 
 }, beforeUpdate(){ 
console.log(</span>'---------beforeUpdate-----------'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> beforeUpdate钩子函数中的特征 数据已经变了 但是页面还没来得及渲染 数据是新的，而页面是旧的 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> console.log(</span>'data',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.num); console.log(</span>'dom',document.querySelector('h3'<span style="color: rgba(0, 0, 0, 1)">).innerHTML); 
 }, updated(){ 
讯享网console.log(</span>'---------updated-----------'<span style="color: rgba(0, 0, 0, 1)">); console.log(</span>'data',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.num); console.log(</span>'dom',document.querySelector('h3'<span style="color: rgba(0, 0, 0, 1)">).innerHTML); 
 }, beforeDestroy(){ 
console.log(</span>'-----------beforeDestroy--------------'<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 此处是准备在销毁之前调用的钩子 此处特征，数据props，data,methods都可以访问，但是DOM已经被移除了 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> console.log(</span>'data',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.num); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log('dom',document.querySelector('h3').innerHTML);</span> 
  }, destroyed(){ 
讯享网 console.log(</span>'-----------destroyed--------------'<span style="color: rgba(0, 0, 0, 1)">); console.log(</span>'data',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.num); 
 } }; &lt;/script&gt; &lt;style&gt; &lt;/style&gt;