- A+
所属分类：Web前端
| 钩子函数 | 说明 |
|---|---|
| beforeCreate | 在实例初始化之后，数据观测和watch/event事件配置之前被调用 |
| created | 在实例创建完成后被立即调用，在这一步，实例已经完成数据观测、属性和方法的运算，以及watch/event事件回调。挂载阶段还未开始，$el属性尚不可用 |
| mounted | 实例被挂载后调用，这时el被新创建的vm.(el替换。如果实例挂载到了一个文档内的元素，当mounted被调用时，vm.)el也在文档内 |
| beforeUpdate | 数据更新时调用。适合在更新前访问现有的DOM，比如手动移除已添加的事件监听器 |
| updated | 数据修改会导致虚拟DOM重新渲染，在渲染后调用 |
| activated | 被keep-alive缓存的组件激活时调用 |
| deactivated | 被keep-alive缓存的组件停用时调用 |
| beforeDestroy | 实例销毁之前调用，在这一步，实例仍然可用 |
| destroyed | 实例销毁后调用。该钩子被调用后，对应vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>生命周期钩子函数</title> </head> <body> <div id="app"> <p>{{msg}}</p> </div> <!--引入vue文件--> <script src="https://unpkg.com/vue@next"></script> <script> //创建一个应用程序 const vm = Vue.createApp({ data(){ return{ msg: '白日依山尽，黄河入海流' } }, beforeCreate(){ console.log('beforeCreate'); }, created(){ console.log('created'); }, beforeMount(){ console.log('beforeMount'); }, mounted(){ console.log('mounted'); }, beforeUpdate(){ console.log('beforeUpdate'); }, updated(){ console.log('updated'); } }).mount('#app'); setTimeout(function(){ vm.msg = '无边落木萧萧下，不尽长江滚滚来'; },4000); </script> </body> </html> 运行以上代码，可以在网页控制台看到内容改变前打印了前四个函数，之后内容改变之后又打印了最后两个函数。
