vue中各个生命周期的作用(vue组件生命周期)

1 .前言

每个Vue实例在创建时都要经过一系列初始化过程——，包括设置数据接收、编译模板、将实例装载到DOM上，以及在数据发生更改时更新DOM。 此外，由于此过程还执行一个称为生命周期挂接的函数，因此用户有机会在各个阶段添加自己的代码。 例如，可以使用created挂接在创建实例后运行代码。

newvue ({2}

data: {

a: 1一

(、

created :功能(

//`this `是指虚拟机实例

控制台日志(AIS : ) this.a ) )。

}

() )

//='a is: 1 '

还有在实例生命周期的各个阶段(如已安装、已更新和已部署)调用的其他挂接。 生命周期挂接的this上下文是指调用它的Vue实例。

2. Vue的生命周期图

3 .示例

！ 文档类型html

html

头部

meta charset='utf-8 '

标题/标题

元名称='视点'内容='宽度=设备宽度，初始比例=1，最小比例=1，最大比例=1

link href=' ./CSS/mui.min.CSS ' rel='样式表' /

/head

主体

divclass=' mui -内容id='内容'

div/div

button @ click='更新msg ('更新组件数据/button

button @ click=' destroy vue (放弃' vue实例/button

/div

脚本src=' ./js/mui.min.js ' /脚本

脚本src=' ./js/vue.js ' /脚本

脚本类型='文本/Javascript '

mui.init (；

var虚拟机=新虚拟机({ (

El : ' #内容'，

data:{

msg: '组件的生命周期！'

(、

方法：

更新MSG :功能(

this.msg='更新组件数据！'

(、

destroy vue :功能(

this.$destroy (； //vue组件的废弃方法

}

(、

贝尔福创建()

alert ('组件实例刚刚创建，还没有进行数据观测和事件配置)；

(、

created ()//常用！

alert (“已创建组件，并进行了数据观测和事件设置”)

(、

贝尔福蒙德

alert ('在编译模板之前未装载)；

(、

mounted ()//经常被使用！

alert ('编译并装载模板，然后渲染页面以显示页面上的数据显示内容)；

(、

候选更新({2}

alert ('在组件更新之前)；

(、

更新()。

alert ('组件更新后)；

(、

疲劳破坏

alert ('在组件被销毁之前)；

(、

已破坏

alert (销毁组件后)；

}

() )

/脚本

/body

/html