<article class=“article fmt article-content”><h2>vue2生命周期</h2><p>vue2中生命周期钩子函数大抵分为三个阶段，8个生命周期钩子函数。别离是：<br/>vue2和vue3钩子函数 — 选项式API</p><ol><li>beforeCreate(){} — 创立前，还无法访问组件中的数据</li><li>created(){} — 创立后，能够拜访组件中的数据</li><li>beforeMount(){} — 挂载前，跟created一样能够拜访组件中的数据，但还不能拜访渲染好的dom元素</li><li>mounted(){} — 挂载后，数据和渲染好的dom元素都能够拜访了</li><li>beforeUpdate(){} — 更新前，能够拜访要更新的数据，但无法访问更新后的dom节点</li><li>updated(){} — 更新后，能够拜访更新后的dom节点了</li><li>beforeDestroy(){} — 销毁前，还能够拜访组件中的数据和dom构造</li><li>destroyed(){} — 销毁后，拜访不到组件中的数据和dom构造了。</li></ol><p>三个阶段别离是：</p><ul><li><p>创立阶段</p><ul><li>初始化vue实例，生命周期还没有开始</li><li>初始化外部的一些事件(开始监听数据)，这时生命周期开始</li><li>注入数据，开始劫持(这个时候vue实例下面就有了响应式数据)</li><li><p>判断是否有el选项，没有的话，就会始终期待vue实例调用<code>$mounte</code>办法传入el</p><ul><li>如果有，就将<code>template</code>提供的构造编译在渲染函数中</li><li>如果没有：就编译<code>el</code>的<code>outerHTML</code>，让它成为渲染模版</li></ul></li><li>给vue实例创立$el属性，值是编译好的模版构造，并应用编译好的模版构造，将传入的el内容替换掉(就是将编译好的内容，显示在页面中)</li></ul></li><li><p>更新阶段</p><ul><li>vue始终期待数据的更新</li><li>数据更新后，从新渲染页面(异步行为–等所有同步执行实现后再执行异步)</li></ul></li><li><p>销毁节点</p><ul><li>vue始终期待调用 <code>$destroy</code> 销毁办法</li><li>调用办法后就销毁实例，当前再改数据，页面也不会响应了。</li></ul><p></p></li></ul><h2>vue3生命周期</h2><p>vue3钩子函数 — 组合式API</p><ol><li>onBeforeMounte(()=>{}) — 挂载前，跟created一样，能够拜访组件中的数据，然而还不能够拜访渲染好的dom节点</li><li>onMounted(()=>{}) — 挂载后，能够拜访数据 和 渲染好的dem节点了</li><li>onBeforeUpdate(()=>{}) — 更新前，能够拜访要更新的数据(更新前的数据),还不能拜访更新后的数据和节点</li><li>onUpdated(()=>{}) — 更新后，更新后的Dom节点能够拜访了</li><li>onBeforeUnmounte(()=>{}) — 销毁前，还能够拜访数据 和 dom构造</li><li>onUnmounted(()=>{}) — 销毁后，拜访不到数据和dom节点了<br/>ps: 因为<code>setup</code>语法，一开始就曾经能够拜访到响应式数据了，所有没有创立前(beforeCreate) 和 创立后(created)的钩子函数了。</li></ol><p>动静组件没有销毁前后的两个生命周期钩子函数，然而会多出两个显示和暗藏的生命周期钩子函数。</p><ul><li>onActivated(()=>{}) — 显示，组件显示时触发</li><li>onDeactivated(()=>{}) — 暗藏，组件暗藏时触发</li></ul><p>vue3的生命周期 和 vue2的生命周期执行程序是一样。只不过没有了<code>beforeCreate</code> 和 <code>created</code> 这两个生命周期，它们被 <code>setup</code> 替换掉了，就是说 <code>setup</code> 等于 <code>beforeCreat</code> 和 <code>created</code>。<br/>在 <code>setup</code> 中 间接就能够定义响应式数据。</p><p></p><h2>父子组件阶段生命周期钩子函数执行程序</h2><h3>创立阶段</h3><ol><li>父组件创立前</li><li>父组件创立后</li><li>父组件挂载前</li><li>子组件创立前</li><li>子组件创立后</li><li>子组件挂载前</li><li>子组件挂载后</li><li>父组件挂载后</li></ol><h3>更新阶段</h3><ol><li>父组件更新前</li><li>子组件更新前</li><li>子组件更新后</li><li>父组件更新后</li></ol><h3>销毁阶段</h3><ol><li>父组件销毁前</li><li>子组件销毁前</li><li>子组件销毁后</li><li>父组件销毁后</li></ol></article>