vue实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。注意：生命周期钩子的 this 上下文指向调用它的 Vue 实例。
注意：不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到位置，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
生命周期图示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="button" value="修改msg" @click="msg='No'"> 13 <h1 id="h3" >{{msg}}</h1> 14 </div> 15 <script> 16 var vm=new Vue({ 17 el:'#app', 18 data:{ 19 msg:'大家好' 20 }, 21 methods: { 22 show(){ 23 console.log('执行了show方法') 24 } 25 }, 26 beforeCreate () { 27 // console.log(this.msg); 28 // this.show(); 29 // 所以上面都报错 30 // 注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还未初始化，调用会报错 31 // 这是我们遇到的第一个生命周期函数，表示实例完全未被创建之前，会执行它 32 } , 33 created () { 34 // 如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作 35 console.log(this.msg); 36 this.show(); 37 }, 38 beforeMount () { 39 // 这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成，但是尚未把模板渲染到页面中 40 console.log(document.getElementById('h3').innerText) 41 // 所以这个打印不出来 42 // 在beforeMount执行时候，页面中的元素，还没有真正替换过来，只是之前写的一些模板字符串 43 44 }, 45 mounted () { 46 // 这是遇到 的第四个生命周期哈数，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面 47 console.log(document.getElementById('h3').innerText); 48 // 所以数据可以打印出来 49 // 注意：mounted是实例创建期间的最后一个生命周期函数，当执行完后mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的躺在我们内存中，一动不动 50 }, 51 beforeUpdate () { 52 // 这时候，表示我们的界面还未更新，数据肯定被更新了 53 console.log('更新界面上的内容：'+document.getElementById('h3').innerText); 54 // 如果因为组件中的数据未发生改变，这里就没输出， 55 console.log('更新data中的msg数据是：'+this.msg) 56 // 的得出结论：当执行 beforeUpdate的时候，页面中的显示数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步 57 }, 58 updated () { 59 console.log('界面上的内容：'+document.getElementById('h3').innerText); 60 console.log('data中的msg数据是：'+this.msg) 61 // 注意：updated事件执行后，页面中和data数据已经保持同步，都是最新的 62 } 63 64 }) 65 </script> 66 </body> 67 </html>
