<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                [TOC] >[success] # 生命周期函數的新寫法 **vue2.x** 版本中 **[生命周期寫法](http://www.hmoore.net/wangjiachong/vue_notes/2140861)**,目前新的 **composition API** 中的 **生命周期** 都需要寫在 **setup函數** 中,用 **按需引入** 的方式來使用,具體代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生命周期函數的新寫法</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ setup(){ const { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } = Vue const name = ref('dell') // beforeMount 等同于 onBeforeMount onBeforeMount(() => { console.log('onBeforeMount') }) // mounted 等同于 onMounted onMounted(() => { console.log('onMounted') }) // beforeUpdate 等同于 onBeforeUpdate onBeforeUpdate(() => { console.log('onBeforeUpdate') }) // updated 等同于 onUpdated onUpdated(() => { console.log('onUpdated') }) // beforeUnmount 等同于 onBeforeUnmount(當組件從頁面v-if隱藏移除時會執行) onBeforeUnmount(() => { console.log('onBeforeUnmount') }) // unmounted 等同于 onUnmounted(組件從頁面移除后執行) onUnmounted(() => { console.log('onUnmounted') }) // 定義方法 const handleClick = () => { name.value = 'lee' } return { name, handleClick } }, template: ` <div @click="handleClick">{{name}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ **composition API** 中很多的 **生命周期** 與原來一樣,不同的就是 **名字有所改變而已**。 >[success] ## 棄用的生命周期 在 **composition API 中有 beforeCreate 與 created 這 2 個生命周期函數我們是不能使用的** ,因為 **setup 函數執行的時間點,在 beforeCreate 與 created 之間** ,所以這 **2** 個 **生命周期** 中要寫的東西,直接寫在 **setup** 中就可以了。 >[success] ## 新的的生命周期 **composition API** 出了 **2** 個新的 **生命周期函數** ,**onRenderTracked 與 onRenderTriggered** ,代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生命周期函數的新寫法</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ setup(){ const { ref, onRenderTracked, onRenderTriggered } = Vue const name = ref('小明') // 每次渲染后重新收集響應式依賴 onRenderTracked(() => { console.log('onRenderTracked') }) // 每次觸發頁面重新渲染時自動執行 onRenderTriggered(() => { console.log('onRenderTriggered') }) // 定義方法 const handleClick = () => { name.value = 'lee' } return { name, handleClick } }, template: ` <div @click="handleClick">{{name}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看