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 >
11 <input type="button" value="修改msg" @click="msg='No'" />
12 <h3 >{{ 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 - 上一篇 »Vue生命周期
- 下一篇 »Vue生命周期和MVVM框架