vue基礎實踐：生命週期鉤子函數

el :'#app' 用來指定當前vm所關聯的視圖
el:'#app', 等價於template: '<h1>{{msg}}</h1>',//指定了template與 el:'#app'沒有關係了html

生命週期函數（鉤子函數）vue

beforeCreated 建立實例以前

created 建立實例成功，（通常在這裏實現數據的異步請求）異步發送ajax請求，

beforeMount 渲染Dom以前，加載組件第一次渲染（把渲染的結果放到頁面以前）
{{msg}}

Mount 渲染Dom完成,加載組件第一次渲染（把渲染的結果放到頁面以後）
你好世界

beforUpdate 從新渲染以前（數據更新等操做控制DOM重現渲染）

Update 從新渲染完成

beforeDestroy 銷燬以前

destroy 銷燬以前

<!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>
</head>
<body>
        <!-- 生命週期函數（鉤子函數） beforeCreated 建立實例以前 created 建立實例成功 ，（通常在這裏實現數據的異步請求）異步發送ajax請求， beforeMount 渲染Dom以前，加載組件第一次渲染（把渲染的結果放到頁面以前） {{msg}} Mount 渲染Dom完成,加載組件第一次渲染（把渲染的結果放到頁面以後） 你好世界 beforUpdate 從新渲染以前（數據更新等操做控制DOM重現渲染） Update 從新渲染完成 beforeDestroy 銷燬以前 destroy 銷燬以前 -->
    <!-- 渲染模板 -->
       <div id="app">
        
           {{msg}}
       </div>
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script> let vm = new Vue({ el:'#app', //template: '<h1>{{msg}}</h1>',//指定了template與 el:'#app'沒有關係了 beforeMount(){ console.log(document.getElementById('app')); }, Mount(){ console.log(document.getElementById('app')); }, data:{ //=>destroy 銷燬 msg : '你好世界' } }); //vm.$mount('#app'); //=>el :'#app' 用來指定當前vm所關聯的視圖 //銷燬以後，再去修改msg響應式數據的值，視圖也不會從新渲染了。一個vue的整個生命週期，是從new vue開始，從destroy結束，生命週期函數就是能讓本身作一些事情。 // vm.$destroy(); // console.log(vm); </script>
</html>

運行結果以下：
node