Vue生命周期

王小白--

已于 2022-07-14 20:03:32 修改

阅读量143

点赞数 1

文章标签： vue.js

于 2022-06-25 12:43:38 首次发布

本文链接：https://blog.csdn.net/weixin_64784735/article/details/125457878

版权

1.挂载流程
beforeCreat()之前：初始化生命周期，事件但数据代理未开始

将要创建：beforeCreat(){} //此时：无法通过VM访问到date的数据和methods的方法

beforeCreat()之后初始化监测数据数据代理

创建完毕：creatd(){} // 此时可以通过vm访问到data的数据和methods的方法

//creatd后Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容

将要挂载：beforeMount（）{} //此时页面呈现的时未经Vue编译的DOM结构。所有对DOM的操作都不奏效

beforeMount 后将内存中虚拟DOM转化为真是DOM

挂载完毕（重要）：mouted（）{} //Vue完成模板的解析初始并把真实DOM元素页面后调用挂载完毕此时页面呈现的是经过Vue编译过的DOM，对DOM的操作均有效（尽可能避免）。至此初始化结束了，一般在此进行：开启定时器，发送请求

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

2.更新流程
将要更新：beforeUpdate(){} //此时数据时新的，但页面是旧的，页面尚未和数据保持同步

//beforeUpdate 根据新的虚拟DOM，随后与旧的虚拟DOM进行对比，最终完成页面的更新完成了Model——>View的更新

更新完毕：update(){} //此时数据是新的页面也是新的，即页面与数据同步

updated: function () {
  this.$nextTick(function () {
    //  仅在整个视图都被重新渲染之后才会运行的代码     
  })
}

将要销毁（重要）：beforeDestroy（）{}
//此时，vm中所有的data，methonds指令等等都处于可用的状态，马上要执行销毁过程，一般在此阶段关闭定时器，取消消息的订阅解绑自定义事件的收尾工作

销毁完毕：destroyd（）{} //此时销毁了一般不做任何工作

1.销毁之后借助Vue开发者工具看不到任何信息
2.销毁后自定义事件会失效，但原生的DOm事件依然生效
3.一般不会在beforeDestroy操作数据，因为即使操作了数据，也不会发生更新流程了

关注