vue每个周期主要干什么?

一、初始化阶段

new Vue() ————》beforeCreate————》Created

初始化这个Vue实例,
在这个Vue实例上初始化属性,数据,事件(props、data、methods、computed、watch等)
所以,在created周期中,可以获取、操作数据了,也可以在methods中发起xhr后端请求了

二、模板编译阶段

Created 到 beforeMount 之间是 模板编译阶段


这里是vue-loader将 <template>编译为 render函数,
如果没有vue-loader,vue也有 vueify将他编译为render函数,每个<template>都会被编译为一个render函数

三、挂载阶段

beforeMount ————》Mounted


vue将这个vue实例挂载到Dom元素上( <div id='app'> </div> ),
挂载过程中,调用render函数,并且vue会开启watcher监听数据变化


调用render时,会生成虚拟节点,
众多虚拟节点组成虚拟DOM(可以看我另一篇文章vue渲染文章),然后虚拟节点被映射为真实DOM

四、更新阶段

beforeUpdate————》Updated


watcher会持续追踪变化,这时,数据层(model)被改变,watcher通知虚拟dom进行数据变化
(对比: 数据改变之前和之后生成两份VNode进行比较, 而旧的VNode上做最小的改动),
这些被改变的老虚拟节点,重新映射为真实DOM

五、卸载阶段

beforeDestory————》Destoryed

vue会在父组件中自我删除,
会把vue实例的所有依赖(属性、数据、方法)全部剔除,然后自我销毁,释放内存
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值