第四章 生命周期函数-- 33 生命周期函数-组件创建期间的4个钩子函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <h3 id="h3">{{msg}}</h3> 15 </div> 16 17 18 <script> 19 //创建 Vue 实例，得到 ViewModel 20 var vm = new Vue({ 21 el:'#app', 22 data:{ 23 msg:'ok' 24 }, 25 methods:{ 26 show(){ 27 console.log('执行了show方法') 28 } 29 }, 30 beforeCreate(){//这是我们遇到的第一个生命周期函数，表示实例完全创建出来 之前，会执行它 31 //console.log(this.msg) 32 // this.show() 33 //注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没初始化 34 35 }, 36 created(){//这是遇到的第二个生命周期函数 37 // console.log(this.msg) 38 // this.show() 39 //在create中，data和methods都已经被初始化好了！ 40 //如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作 41 }, 42 beforeMount(){//这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中 43 // console.log(document.getElementById('h3').innerText) 44 //在beforeMount页面中的元素，还没有真正被替换过来，只是之前写的一些模板字符串 45 }, 46 mounted(){//这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 47 console.log(document.getElementById('h3').innerText) 48 //mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的躺在我们的内存中，一动不动 49 } 50 }); 51 </script> 52 </body> 53 </html>
