<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="vue2.2.js"></script> <title>构造器的声明周期</title> </head> <body> <h1>构造器的声明周期</h1> <hr> <div id="app"> {{count}} <p><button @click="add">加分</button></p> </div> <button onclick="vm.$destroy()">销毁</button> <script type="text/javascript"> var vm = new Vue({ el: ‘#app‘, data: { count: 1 }, methods: { add: function() { this.count++; } }, beforeCreate: function() { console.log(‘1-beforeCreate 初始化之后‘); }, created: function() { console.log(‘2-created 创建完成‘); }, beforeMount: function() { console.log(‘3-beforeMount 挂载之前‘); }, mounted: function() { console.log(‘4-mounted 被创建‘); }, beforeUpdate: function() { console.log(‘5-beforeUpdate 数据更新前‘); }, updated: function() { console.log(‘6-updated 被更新后‘); }, activated: function() { console.log(‘7-activated‘); }, deactivated: function() { console.log(‘8-deactivated‘); }, beforeDestroy: function() { console.log(‘9-beforeDestroy 销毁之前‘); }, destroyed: function() { console.log(‘10-destroyed 销毁之后‘) } }) </script> </body> </html>
create 和 mounted 相关:
beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载 dom元素已经加载到HTML中
destroy 相关: 执行:vm.$destroy()
销毁完成后,我们再重新改变count的值,vue不再对此动作进行响应了。
但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。
生命周期总结:
beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容-
时间: 2024-09-30 00:20:55