Vue3 setup中使用生命周期函数

作者: 温新

分类: 【Vue.js】

阅读: 8574

时间: 2021-08-22 12:34:44

hi,我是温新,一名PHPer

setup中使用生命周期函数需要加上on

因为 setup 是围绕 beforeCreatecreated 生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

生命周期函数有:onBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmountonUnmountedonErrorCapturedonRenderTrackedonRenderTriggeredonActivatedonDeactivated

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 204)">id</span>=<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"><</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">setup</span>() {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onBeforeMount</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onMounted</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onBeforeUpdate</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onUpdated</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 255)">onRenderTriggered</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   } <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(0, 85, 170)">onBeforeMount</span>( () <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'before-mount'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(0, 85, 170)">onMounted</span>( () <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'mounted'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   }); </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(0, 85, 170)">onBeforeUpdate</span>( () <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'before-update'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(0, 85, 170)">onUpdated</span>( () <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">console</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">log</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'updated'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">   });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">vm</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)"></</span><span style="box-sizing: border-box;color: rgb(17, 119, 0)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(17, 119, 0)">></span></span>

我是温新

每天进步一点,就一点点

请登录后再评论