Vue，生命周期函数演示（创建阶段的4个钩子函数，组件运行和销毁阶段的钩子函数）
Vue，生命周期函数演示（创建阶段的4个钩子函数，组件运行和销毁阶段的钩子函数）
创建阶段
beforeCreate（）{ }
created（）{ }
beforeMount（）{ }
mount（）{ }
运行阶段
beforeUpdate（）{ }
updated（）{ }
销毁阶段
beforeDestroy（）{ }
destroyed（）{ }
1 <!DOCTYPE html> 2 <html> 3 <!-- P37 --> 4 <head> 5 <meta charset="utf-8"> 6 <title></title> 7 </head> 8 <script src="../js/vue.js" charset="utf-8"></script> 9 <body> 10 <div id="app"> 11 <input type="button" value="修改msg" @click="msg='No'" /> 12 <h3 id="w3">{{ msg }}</h3> 13 </div> 14 </body> 15 </html> 16 <script> 17 var vm = new Vue({ 18 el: '#app', 19 data:{ 20 msg:'ok' 21 }, 22 methods:{ 23 show(){ 24 console.log("执行了show方法") 25 } 26 }, 27 beforeCreate() { // 这是我们第一个遇到的生命周期函数, 表示实例完全被创建之前, 会执行它 28 // console.log(this.msg) // 输出undefined 29 // this.show() //输出this.show is not a function 30 // 注意: 在 beforeCreate 生命周期函数被执行的时候, data 和 methods 中的 数据都还没有初始化 31 }, 32 created() { //这是我们遇到的第二个生命周期函数 33 // console.log(this.msg) //输出ok 34 // this.show() // 输出 "执行了show方法" 35 // 在 created 中, data 和 methods 都已经初始化好了! 36 // 如果要调用 methods 中的方法, 或者操作 data 中的数据, 最早, 只能在 created 中操作 37 }, 38 beforeMount() { //这是我们遇到的第三个生命周期函数, 表示 模板已经在内存中编译完成了, 但是尚未把 模板渲染到 页面中 39 // console.log(document.getElementById("w3").innerText) // 输出 {{ msg }} 40 // 在 beforeMount 执行的时候, 页面中的元素, 还没有被真正替换过来, 只是之前写的一些模板字符串 41 }, 42 mounted() { //这是我们遇到的第四个生命周期函数, 表示 内存的模板, 已经真是的挂载到了页面上, 用户可以已经看到渲染好的页面 43 // console.log(document.getElementById("w3").innerText) // 输出 ok 44 // 注意: mounted 是 实例创建期间的最后一个生命周期函数, 当执行完 mounted 就表示, 实例已经被完全创建好了, 此时, 45 // 如果没有其它操作的话, 这个实例, 就静静的 躺在我们的内存中, 一动不动 46 }, 47 48 49 // 接下来的是运行中的两个事件 50 beforeUpdate() { //这时候, 表示 我们的界面还没被更新 [数据被更新了吗？ 数据肯定被更新了] 51 // console.log('界面上元素的内容: '+ document.getElementById('w3').innerText) // 输出 ok 52 // console.log('data 中的 msg 数据是: ' + this.msg) // 输出 No 53 // 得出结论: 当执行 beforeUpdate 的时候, 页面中的显示的数据, 还是旧的, 此时 data 数据 54 // 是最新的, 页面尚未和 最新的数据保持同步 55 }, 56 updated() { 57 console.log('界面上元素的内容: '+ document.getElementById('w3').innerText) // 输出 No 58 console.log('data 中的 msg 数据是: ' + this.msg) // 输出 No 59 // updated 事件执行的时候, 页面 和 data 数据已经保持同步了, 都是最新的 60 } 61 62 // <!-- 63 // 当执行 beforeDestroy 钩子函数的时候， Vue实例就已经 从 运行阶段， 进入到了销毁阶段； 64 // 65 // 当执行 beforeDestroy 的时候， 实例身上所有的 data 和 所有的 methdos ， 以 过滤器、指令.... 66 // 都处于可用状态， 此时， 还没有真正执行 销毁的过程 67 // 68 // 当执行 destroyed 函数的时候， 组件已经被完全销毁了， 此时， 组件中所有的 数据， 方法， 指令， 69 // 过滤器... 都已经不可用了 70 // --> 71 }) 72 </script> 73
