VUE生命週期函式演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
  </div>

  <script>
    // 
 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {
          console.log('執行了show方法')
        }
      },
      beforeCreate() { // 這是我們遇到的第一個生命週期函式，表示例項完全被創建出來之前，會執行它
        console.log(this.msg)
        this.show()
         
// 注意： 在 beforeCreate 生命週期函式執行的時候，data 和 methods 中的 資料都還沒有沒初始化
      },
      created() { // 這是遇到的第二個生命週期函式
        console.log(this.msg+"2")
        this.show()
        //  在 created 中，data 和 methods 都已經被初始化好了！
        // 如果要呼叫 methods 中的方法，或者操作 data 中的資料，最早，只能在 created 中操作
      },
      beforeMount() { // 這是遇到的第3個生命週期函式，表示 模板已經在記憶體中編輯完成了，但是尚未把 模板渲染到 頁面中 

        console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字串
      },
      mounted() { // 這是遇到的第4個生命週期函式，表示，記憶體中的模板，已經真實的掛載到了頁面中，使用者已經可以看到渲染好的頁面了
        console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 例項建立期間的最後一個生命週期函式，當執行完 mounted 就表示，例項已經被完全建立好了，此時，如果沒有其它操作的話，這個例項，就靜靜的 躺在我們的記憶體中，一動不動
      },


      // 接下來的是執行中的兩個事件
      beforeUpdate() { // 這時候，表示 我們的介面還沒有被更新【資料被更新了嗎？  資料肯定被更新了】
        console.log('介面上元素的內容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 資料是：' + this.msg)
        // 得出結論： 當執行 beforeUpdate 的時候，頁面中的顯示的資料，還是舊的，此時 data 資料是最新的，頁面尚未和 最新的資料保持同步
      },
      updated() {
        console.log('介面上元素的內容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 資料是：' + this.msg)
        // updated 事件執行的時候，頁面和 data 資料已經保持同步了，都是最新的
      }
    });
  </script>
</body>

</html>

作者：符號哥
微信公眾號：左側為二維碼
個人技術網站-程式設計符號網：http://www.itfh.cn
個人技術網站-IT原始碼網：http://www.itym.cn
新浪微博：https://weibo.com/u/2814576687
如果你想及時得到個人撰寫文章以及著作的訊息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識別二維碼）關注個人公眾號。
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

VUE生命週期函式演示

VUE生命週期函式演示

vue 生命週期函式

vue生命週期函式

vue 生命週期【鉤子函式】

Vue基礎之生命週期函式[殘缺版]！

vue生命週期鉤子函式

Vue過濾器,生命週期函式和vue-resource簡單介紹

Vue生命週期介紹和鉤子函式詳解

Vue生命週期和鉤子函式的詳解與經典面試題

Vue之生命週期函式詳解

Vue生命週期中的八個鉤子函式相機

vue生命週期鉤子函式與後端互動

vue物件的生命週期函式（鉤子函式）

vue學習08——生命週期函式、setup函式

vue生命週期以及常用標籤

React 【生命週期】三個階段生命週期函式、不同生命週期詳解、生命週期呼叫順序

Vue生命週期activated之返回上一頁不重新請求資料操作

vue生命週期

淺談vue生命週期共有幾個階段？分別是什麼？

生命週期函式

VUE生命週期函式演示

相關推薦