Vue 生命周期

一. Vue 生命周期图

1. 官方原图

该图是官方给出的生命周期图，下图是老刘画的图

2. 大神原图

二. Vue 生命周期

create

let vm = new Vue()
1

---

mount

挂载，把div挂载到组件中

update

let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改这个内容
    },
    methods: {
        handleClick() {
            console.log('我是根组件')
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11

---

1.bedoreCreate

2.created

这个用的多，只要创建，data变量就初始化完成了，一般是从后端获取到的，在此处发送ajax请求

3.beforeMount

4.mounted

5.beforeUpdate

6.updated

7.beforeDestroy

8.destroyed

组件销毁 - 给组件写一个定时器

setTimeout()     // 延迟3s干什么事
setInterval()    // 延迟3s干什么事
1
2

三. 测试代码

这里使用简易组件测试。

<div id="app">
    <button @click="handleShow">点我组件显示和消失</button>
    <Child v-if="show"></Child>

</div>


<script>
    // 创建一个组件
    Vue.component('Child', {
        template: `
          <div>
          <h1>{{ name }}</h1>
          <button @click="handleClick">点我</button>
          </div>
        `,
        data() {
            return {
                name: 'xwx',
                t: '',
            }
        },
        methods: {
            handleClick() {
                alert('xwx')
            }
        },
        beforeCreate() {
            console.log('组件创建之前执行 beforeCreate')
        },
        created() {
            console.log('组件创建成功后执行 created')
            // 延迟任务，延迟几秒执行某个函数
            // setTimeout(()=>{
            //     alert('lqz is handsome')
            // },3000)

            // 定时任务，每隔几秒，执行一次
            this.t = setInterval(() => {
                console.log('3s结束了')
            }, 3000)
        },
        beforeMount() {
            console.log('渲染之前调用 beforeMount')
        },
        mounted() {
            console.log('渲染之后调用 mounted')
        },
        beforeUpdate() {
            console.log('重新渲染前调用 beforeUpdate')
        },
        updated() {
            console.log('重新渲染后调用 updated')
        },
        beforeDestroy() {
            console.log('销毁之前调用 beforeDestroy')
            clearInterval(this.t)
            this.t = null
        },
        destroyed() {
            console.log('销毁之后调用 destroyed')
        }

    })


    new Vue({
        el: '#app',
        data: {
            show: false,
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }
    })

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79