vue的四大周期八大钩子能怎么用？

1.Vue的生命周期阶段

1. 创建阶段

   • beforeCreate：在这个阶段，数据是获取不到的，并且真实DOM元素也是没有渲染出来的，el和data, method并没有初始化，不能访问data的数据和method方法。
   • created：在这个阶段，可以访问到数据了，data, method已经初始化，能访问data的数据和method方法，但是页面当中真实DOM节点还是没有渲染出来。在这个阶段，可以进行相关初始化事件的绑定、发送请求操作。

     new Vue({  
       data: {  
         message: 'Hello Vue!'  
       },  
       beforeCreate() {  
         console.log('beforeCreate:', this.message); // undefined，因为数据还没有被挂载  
       },  
       created() {  
         console.log('created:', this.message); // Hello Vue!，此时可以访问到数据  
       }  
     });

2. 挂载阶段

   • beforeMount：代表DOM马上就要被渲染出来了，但是却还没有真正的渲染出来。这个钩子函数与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作。
   • mounted：挂载阶段的最后一个钩子函数，数据挂载完毕，真实DOM元素也已经渲染完成了，可以拿到真实DOM并对真实DOM进行操作。这个钩子函数内部可以做一些实例化相关的操作。

     // 假设你的 Vue 实例挂载到一个名为 #app 的元素上  
     new Vue({  
       el: '#app',  
       data: {  
         message: 'Hello Vue!'  
       },  
       mounted() {  
         console.log('mounted:', this.$el.innerText); // 可能会输出 'Hello Vue!'  
       }  
     });

3. 更新阶段

   • beforeUpdate：数据更新前，这个钩子函数初始化的不会执行，当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行。这个钩子函数获取DOM的内容是更新之前的内容，重新构建虚拟DOM树并利用diff算法对其进行重新渲染。
   • updated：这个钩子函数获取DOM的内容是更新之后的内容生成新的虚拟DOM，新的虚拟DOM与之前的虚拟DOM进行比对，差异之后，就会进行真实DOM渲染。在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实DOM渲染了。

4. 销毁阶段

   • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
   • destroyed：实例销毁时触发，Vue实例解除了事件监听以及和DOM的绑定（无响应了），但DOM节点依旧存在。在这个阶段，可以做一些善后工作，例如清除计时器、清除非指令绑定的事件等。

     new Vue({  
       data: {  
         show: true  
       },  
       template: `  
         <div v-if="show">  
           {{ message }}  
           <button @click="show = false">Hide</button>  
         </div>  
       `,  
       beforeDestroy() {  
         console.log('beforeDestroy');  
         // 在这里清理定时器、解绑全局事件、销毁插件对象等  
       },  
       destroyed() {  
         console.log('destroyed');  
         // 组件已销毁，清理工作已完成  
       }  
     });