欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 人文社科 > 生活经验 >内容正文

生活经验

Vue 生命周期记录_学习笔记

发布时间：2023/11/27 生活经验 42 豆豆
生活随笔 收集整理的这篇文章主要介绍了 Vue 生命周期记录_学习笔记 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

 官方给出的设计图入戏

 为了能更好的理解这个图呢,写了下面的demo 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="vue.js" type="text/javascript" charset="utf-8"></script><title>vue生命周期</title></head><body><div id="me">{{msg}}</div></body><script type="text/javascript">var vm = new Vue({el:"#me",data:{msg:"学习vue呢"},//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。beforeCreate:function(){console.log('beforeCreate');},/* 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 */created:function(){console.log('created');},//在挂载开始之前被调用：相关的渲染函数首次被调用LbeforeMount:function(){console.log('beforeMount');},//el 被新创建的 vm.$el 替换, 挂在成功	mounted:function(){console.log('mounted');},//数据更新时调用beforeUpdate : function(){console.log('beforeUpdate');},//组件 DOM 已经更新, 组件更新完毕 updated : function(){console.log('updated');},beforeDestroy:function(){console.log('beforeDestroy');},destroyed:function(){console.log('destroyed');}});setTimeout(function(){vm.msg = "学习vue呢::::::::::::::::::"},3000);setTimeout(function(){vm.$destroy()},6000);</script>
</html>

刚才开走

间隔3s 后走了

间隔5s 后走了

总结

以上是生活随笔为你收集整理的Vue 生命周期记录_学习笔记的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。