<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>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                [TOC] >[success] # 理解 Vue 中的生命周期函數 ![](https://img.kancloud.cn/24/7c/247c89e23c2518912d7434f004ef183d_1200x3039.png) 本章節講解了, **vue** 的 **生命周期** 的 **執行順序** ,**vue** 目前總共 **8個生命周期** ,大家只需要記住: **生命周期,是在謀一時刻會自動執行的函數** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue的生命周期</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, // 1. 在實例生成之【前】會自動執行的函數 beforeCreate(){ console.log('beforeCreate') }, // 2. 在實例生成之【后】會自動執行的函數 created(){ console.log('created') }, // 3. 在組件內容被渲染到頁面之【前】立即執行的函數 beforeMount(){ console.log(document.getElementById('root').innerHTML, 'beforeMount') }, // 4. 在組件內容被渲染到頁面之【后】立即執行的函數 mounted(){ console.log(document.getElementById('root').innerHTML, 'mounted') }, // 5. 當數據發生變化時會立即自動執行的函數 beforeUpdate(){ console.log(document.getElementById('root').innerHTML, 'beforeUpdate') }, // 6. 當數據發生變化,頁面重新渲染后,會自動執行的函數 updated(){ console.log(document.getElementById('root').innerHTML, 'updated') }, // 7. 當 Vue 應用失效時, 自動執行的函數(被銷毀時執行的函數,執行app.unmount()),從掛在的#root元素上解開綁定 beforeUnmount(){ console.log(document.getElementById('root').innerHTML, 'beforeUnmount') }, // 8. 當 Vue 應用失效時,且 dom 完全銷毀之后,自動執行的函數 unmounted(){ console.log(document.getElementById('root').innerHTML, 'unmounted') }, methods: { handleItemClick(){ alert('click') } }, template: '<div v-on:click="handleItemClick">{{message}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ 如果 **實例化** 的 **Vue根組件對象** 中也可以不寫 **template** 屬性,可以直接在 **元素內部** 使用 **表達式** 的方式來做到同樣效果,如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue的生命周期</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"> <div v-on:click="handleItemClick">{{message}}</div> </div> </body> <script> // 生命周期函數:在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, // 1. 在實例生成之【前】會自動執行的函數 beforeCreate(){ console.log('beforeCreate') }, // 2. 在實例生成之【后】會自動執行的函數 created(){ console.log('created') }, // 3. 在組件內容被渲染到頁面之【前】立即執行的函數 beforeMount(){ console.log(document.getElementById('root').innerHTML, 'beforeMount') }, // 4. 在組件內容被渲染到頁面之【后】立即執行的函數 mounted(){ console.log(document.getElementById('root').innerHTML, 'mounted') }, // 5. 當數據發生變化時會立即自動執行的函數 beforeUpdate(){ console.log(document.getElementById('root').innerHTML, 'beforeUpdate') }, // 6. 當數據發生變化,頁面重新渲染后,會自動執行的函數 updated(){ console.log(document.getElementById('root').innerHTML, 'updated') }, // 7. 當 Vue 應用失效時, 自動執行的函數(被銷毀時執行的函數,執行app.unmount()),從掛在的#root元素上解開綁定 beforeUnmount(){ console.log(document.getElementById('root').innerHTML, 'beforeUnmount') }, // 8. 當 Vue 應用失效時,且 dom 完全銷毀之后,自動執行的函數 unmounted(){ console.log(document.getElementById('root').innerHTML, 'unmounted') }, methods: { handleItemClick(){ alert('click') } } }) 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>

                              哎呀哎呀视频在线观看