一、初始化阶段
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实例的所有依赖(属性、数据、方法)全部剔除,然后自我销毁,释放内存