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>