Vue的生命周期函数

Posted netlws

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的生命周期函数相关的知识,希望对你有一定的参考价值。

Vue的生命周期函数通常分为以下三类:
①实例创建时的生命周期函数;②实例执行时的生命周期的函数;③实例销毁时的生命周期的函数。
代码与注释详解:
 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>Vue实例的生命周期</title>
 8   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 </head>
10 <body>
11   <div id="app">
12     <input type="button" value="修改msg" @click="msg=‘No‘">
13     <h3 id="h3">{{ msg }}</h3>
14   </div>
15   <script>
16     // 创建 Vue 实例,得到 ViewModel
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         this.show()
29         // 这是第一个生命周期函数,表示实例完全被创建出来之前,会执行它
30         // console.log(this.msg)
31         // 注意:在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有没初始化
32       },
33       created() {
34         // 这是第二个生命周期函数
35         // console.log(this.msg)
36         // this.show()
37         // 在 created 中,data 和 methods 都已经被初始化好了!
38         // 如果要调用methods中的方法,或者操作 data 中的数据,最早只能在 created 中操作
39       },
40       beforeMount() {
41         // 这是第3个生命周期函数,表示模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中
42         // console.log(document.getElementById(‘h3‘).innerText)
43         // 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
44       },
45       mounted() {
46         // 这是遇到的第4个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
47         // console.log(document.getElementById(‘h3‘).innerText)
48         // 注意:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了
49       },
50 
51       // 接下来的是运行中的两个事件
52       beforeUpdate() { 
53         // 这时候,表示 我们的界面还没有被更新【数据被更新了吗?  数据肯定被更新了】
54         /* console.log(‘界面上元素的内容:‘ + document.getElementById(‘h3‘).innerText)
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       beforeDestroy() {
64 
65       },
66       destroyed() {
67 
68       }
69     });
70   </script>
71 </body>
72 </html>

以上是关于Vue的生命周期函数的主要内容,如果未能解决你的问题,请参考以下文章

Android片段生命周期:onResume调用了两次

在不存在的片段上调用片段生命周期和 onCreate 的问题

导航上的片段生命周期重叠

Android 片段生命周期

关于片段生命周期,何时调用片段的 onActivityResult?

理解片段事务期间片段的生命周期方法调用