Vue生命周期函数详解（笔记、（24））

!DOCTYPE html html head titleVue 2 生命周期HTML方式/title script src./js/vue.js/script /head body div idapp p{{ message }}/p button clickupdateMessage更新数据/button /div script //vue生命周期函数 new Vue({ el: #app, data: { message: Hello Vue!, timer: null }, // 实例初始化之后数据观测和事件配置之前 beforeCreate() { console.log(beforeCreate: 无法访问 data, this.message); // undefined }, // 实例创建完成可访问 data 和 methods created() { console.log(created: 可以访问 data, this.message); // 示例启动一个定时器 this.timer setInterval(() { console.log(定时器运行中...); }, 1000); }, // 挂载开始之前模板编译完成但未渲染 DOM beforeMount() { console.log(beforeMount: 尚未挂载 DOM); }, // 挂载完成DOM 已生成可操作 DOM mounted() { console.log(mounted: DOM 已挂载, document.querySelector(p).innerText); // 可以在这里初始化第三方库等 }, // 数据变化DOM 更新之前 beforeUpdate() { console.log(beforeUpdate: 即将更新 DOM当前 message 为, this.message); }, // 数据变化DOM 更新完成 updated() { console.log(updated: DOM 已更新, document.querySelector(p).innerText); }, // 实例销毁之前清理资源 beforeDestroy() { console.log(beforeDestroy: 清理定时器); clearInterval(this.timer); }, // 实例销毁后 destroyed() { console.log(destroyed: 实例已销毁); }, methods: { updateMessage() { this.message Updated at new Date().toLocaleTimeString(); }, destroyVM() { this.$destroy(); // 手动销毁实例仅用于演示通常不这样做 } } }); /script /body /html