什么是生命周期?
人的生命周期
Vue的生命周期
是什么 : 组件创建到销毁的全过程
作用 : 在特定的时间节点做特定的事情, 比如: created 中发送 ajax 请求获取数据
Vue 框架内置函数，随着组件的生命周期阶段，自动执行
作用: 特定的时间点，执行特定的操作
场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
分类: 4大阶段8个方法
1.new Vue() – Vue实例化(组件也是一个小的Vue实例)
2.Init Events & Lifecycle – 初始化事件和生命周期函数
3.beforeCreate – 生命周期钩子函数被执行
4.Init injections&reactivity – Vue内部添加data和methods等
5.created – 生命周期钩子函数被执行, 实例创建
6.接下来是编译模板阶段 –开始分析
7.Has el option? – 是否有el选项 – 检查要挂到哪里
8.没有. 调用\(mount()方法<br> 有, 继续检查template选项</p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//0_de.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='区别组件的钩子函数 actived和mounted vue的钩子函数作用是什么_Vue_03' title="在这里插入图片描述" style="width: 1156px; visibility: visible;"></p><p><strong>注意 :</strong> beforeCreate 不能获取 data ,created 可以获取 data, 不能获取真实 DOM</p><div></div><p>1.template选项检查</p><p>有 - 编译template返回render渲染函数</p><p>例如:</p><p>但是: 因为Vue脚手架环境使用webpack+vue-template-compiler包, 进行模板编译转换后运行, 所以vue.js里只有运行时的代码, 所以这么写在脚手架环境会报错</p><p>所以: 脚手架环境, 直接写的是render函数方式进行渲染</p><div></div><p>无 – 编译el选项对应标签作为template(要渲染的模板)</p><p>例如:</p><div></div><p>2.虚拟DOM挂载成真实DOM之前</p><p>3.beforeMount – 生命周期钩子函数被执行</p><p>4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上</p><p>5.真实DOM挂载完毕</p><p>6.mounted – 生命周期钩子函数被执行</p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//0_f3b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='区别组件的钩子函数 actived和mounted vue的钩子函数作用是什么_生命周期_04' title="在这里插入图片描述" style="width: 619px; visibility: visible;"></p><p>注: mounted 可以获取真实 DOM</p><div></div><p>1.当data里数据改变, 更新DOM之前</p><p>2.beforeUpdate – 生命周期钩子函数被执行</p><p>3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM</p><p>4.updated – 生命周期钩子函数被执行</p><p>5.当有data数据改变 – 重复这个循环</p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//0_6d78890.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='区别组件的钩子函数 actived和mounted vue的钩子函数作用是什么_vue.js_05' title="在这里插入图片描述" style="width: 613px; visibility: visible;"></p><p><strong>注意:</strong></p><ol><li>beforeUpdate data 更新了, 真实 DOM 没有更新</li><li>updated 可以获取更新后的DOM</li></ol><div></div><p>1.当\)destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行
components/Life.vue - 准备生命周期方法(Life组件即将要被删除)
主要: App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/154414.html