vue 基礎入門筆記 09:生命週期函式

September發表於2019-08-16
Vue筆記函式
  1. beforeCreate() data 和 methods 都沒有初始化
  2. created() data 和 methods 有初始化
  3. beforeMount() 模板已經編譯好在記憶體，但尚未把模板渲染到頁面
  4. mounted() 模板已經渲染到頁面

  5. beforeUpdate() 當data 發生改變觸發, 當執行該函式時，頁面顯示的資料還是舊的，此時data資料是最新的，尚未和頁面資料同步

    <!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="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script>
    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{},
       //data 和 methods 都沒有初始化
       beforeCreate() {

       },
       //data 和 methods 有初始化
       created() {
       },
       //模板已經編譯好在記憶體，但尚未把模板渲染到頁面
       beforeMount() {

       },
       //模板已經渲染到頁面
       mounted() {

       },
       //當data 發生改變觸發, 當執行該函式時，頁面顯示的資料還是舊的，此時data資料是最新的，尚未和頁面資料同步
       beforeUpdate() {

       },
       updated() {

       },
       //示例銷燬
       beforeDestroy() {

       },
    });
Vue.config.devtools = true
</script>
</body>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

日照香爐生紫煙

相關文章