Vue一共有10个生命周期函数,我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
其实在Vue的官网有一张图已经很好的诠释了生命周期,我在这里就不再多讲了,直接贴图,然后上程序代码。
我们直接来看一段代码:
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
|
<
!
DOCTYPE
html
>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<script
type
=
“text/javascript”
src
=
“../assets/js/vue.js”
>
</script>
<
title
>构造器的声明周期
<
/
title
>
<
/
head
>
<
body
>
<
h1
>构造器的声明周期
<
/
h1
>
<
hr
>
<
div
id
=
“app”
>
{
{
message
}
}
<
p
>
<
button
@
click
=
“jia”
>加分
<
/
button
>
<
/
p
>
<
/
div
>
<
button
onclick
=
“app.$destroy()”
>销毁
<
/
button
>
<script
type
=
“text/javascript”
>
var
app
=
new
Vue
(
{
el
:
‘#app’
,
data
:
{
message
:
1
}
,
methods
:
{
jia
:
function
(
)
{
this
.
message
++
;
}
}
,
beforeCreate
:
function
(
)
{
console
.
log
(
‘1-beforeCreate 初始化之后’
)
;
}
,
created
:
function
(
)
{
console
.
log
(
‘2-created 创建完成’
)
;
}
,
beforeMount
:
function
(
)
{
console
.
log
(
‘3-beforeMount 挂载之前’
)
;
}
,
mounted
:
function
(
)
{
console
.
log
(
‘4-mounted 被创建’
)
;
}
,
beforeUpdate
:
function
(
)
{
console
.
log
(
‘5-beforeUpdate 数据更新前’
)
;
}
,
updated
:
function
(
)
{
console
.
log
(
‘6-updated 被更新后’
)
;
}
,
activated
:
function
(
)
{
console
.
log
(
‘7-activated’
)
;
}
,
deactivated
:
function
(
)
{
console
.
log
(
‘8-deactivated’
)
;
}
,
beforeDestroy
:
function
(
)
{
console
.
log
(
‘9-beforeDestroy 销毁之前’
)
;
}
,
destroyed
:
function
(
)
{
console
.
log
(
‘10-destroyed 销毁之后’
)
}
}
)
</script>
<
/
body
>
<
/
html
>
|