文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >2.8 组件的生命周期

2.8 组件的生命周期

作者头像
Qwe7
发布于 2022-07-20 20:12:28
发布于 2022-07-20 20:12:28
5620
举报
文章被收录于专栏：网络收集网络收集

2.8 组件的生命周期

实例化Vue对家

newVue0

Ilnit

初始化重件和生命店期

Events&Lifecycle

创建实例之前热行的钢子工件

beforeCreate

Init

切始化注入

Injections&reactivlty

实到创亚完成后热行的钓子

created

Has

NO

有设有e选项

elr'option?

没有则使用vm.Smount0去挂数模板

Vm.Smount(el)

YES

iscalled

Has

template"optlon?

NO

给译共极

YES

iEdata对乐里的数据

Complletemplate

Complleel's

twue语法声明的快板

outerHTML

译蔗询览整可法的HTMLout

renderfunction

astemplate

将缤注完成的HTML抖我到

对应虚抖dom时钟发的钞子

beforeMount

此时页面并没有内容

CreatevmSel

将纷译务的HTML专奖荣e一性

andreplace

所器向的dom

erwithit

更新之前约的子

mounted

译好的HTML挂金到页百完成信执行的土件约子

Whendata

changes

此钓子画欲中一根会做一实小2x计求获段数据

进行发活切始化

实时蓝控数指变化

注意:mounted在整个实例中只扰行一次

开阶之更斯DOM

VirtualDOm

Mounted

re-render

andpatch

When

实例销袋

Vm.sdestroy0

updated

iscalled

实例省毁之前执行的的子

史新之后的针于

beforeDestroy

Teardown

拆除数据监听,子组件和有件篮听

watchers.chlld

componentsand

eventlisteners

实圳铺毁完成执行的筒子

Destroyed

destroyed

TemplAteCompilationisperforMdaheaDoftimefusing

abuildstep.eg.single-flecomponents

Vue中的组件也是有生命周期的。一个Vue组件会经历：初始化、创建、绑定、更新、销毁等阶段，不同的阶段，都会有相应的生命周期钩子函数被调用。

HTML

复制代码

1

代码语言：javascript
复制
<html>

2

代码语言：javascript
复制
  <head>

3

代码语言：javascript
复制
    <meta charset="UTF-8">

4

代码语言：javascript
复制
    <title>生命周期</title>

5

代码语言：javascript
复制
  </head>

6

代码语言：javascript
复制
  <body>

7

代码语言：javascript
复制
    <div id="app1">

8

代码语言：javascript
复制
      {{title}}

9

代码语言：javascript
复制
      <button type="button" @click="changeTitle">change title</button>

10

代码语言：javascript
复制
      <button type="button" @click="destroy">destroy</button>

11

代码语言：javascript
复制
    </div>

12

代码语言：javascript
复制
  </body>

13

代码语言：javascript
复制
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

14

代码语言：javascript
复制
  <script>

15

代码语言：javascript
复制
    new Vue({

16

代码语言：javascript
复制
      el:"#app1",

17

代码语言：javascript
复制
      data:{

18

代码语言：javascript
复制
        title:"this is title"

19

代码语言：javascript
复制
      },

20

代码语言：javascript
复制
      methods:{

21

代码语言：javascript
复制
        changeTitle:function(){

22

代码语言：javascript
复制
          this.title= "new title";

23

代码语言：javascript
复制
        },

24

代码语言：javascript
复制
        destroy:function(){

25

代码语言：javascript
复制
          this.$destroy();

26

代码语言：javascript
复制
        }

27

代码语言：javascript
复制
      },

28

代码语言：javascript
复制
      beforeCreate(){

29

代码语言：javascript
复制
        console.log("beforeCreate")

30

代码语言：javascript
复制
      },

31

代码语言：javascript
复制
      created(){

32

代码语言：javascript
复制
        console.log("created")

33

代码语言：javascript
复制
      },

34

代码语言：javascript
复制
      beforeMount(){

35

代码语言：javascript
复制
        console.log("beforeMount")

36

代码语言：javascript
复制
      },

37

代码语言：javascript
复制
      mounted(){

38

代码语言：javascript
复制
        console.log("mounted")

39

代码语言：javascript
复制
      },

40

代码语言：javascript
复制
      beforeUpdate(){

41

代码语言：javascript
复制
        console.log("beforeUpdate")

42

代码语言：javascript
复制
      },

43

代码语言：javascript
复制
      updated(){

44

代码语言：javascript
复制
        console.log("updated")

45

代码语言：javascript
复制
      },

46

代码语言：javascript
复制
      beforeDestroy(){

47

代码语言：javascript
复制
        console.log("beforeDestory")

48

代码语言：javascript
复制
      },

49

代码语言：javascript
复制
      destroyed(){

50

代码语言：javascript
复制
        console.log("destory")

51

代码语言：javascript
复制
      }

52

代码语言：javascript
复制
    })

53

代码语言：javascript
复制
  </script>

54

代码语言：javascript
复制
</html>

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html
vue.js

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档