Vue中的生命周期
Vue.component( 'Hello',{
template: '#hello',
data () { //除了根式
return {
num: 920
}
},
//------------------------------------初始化------------------------
beforeCreate () {
/*
这个阶段：组件创建前
data data选项中的数据获取不到
RDOM 拿不到
项目中： 没什么用
但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
*/
},
created () { // 组件创建结束
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
},
beforeMount () { //组件即将挂载
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
},
mounted () { //组件挂载结束了
/*
这个阶段：
data: 可以获得数据
RDOM: 拿到了
项目中：
数据修改
异步数据请求
真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
*/
},
// ------------------------------------运行中---------------------
beforeUpdate () { //表示组件即将更新 vdom --diff--> vdom的不同（patch对象）
/*
这个阶段：
data: 拿到了
RDOM： 获得
这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
*/
},
updated () { // 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
/*
这个阶段：
动态数据的渲染，进行dom操作（ 第三方库的实例化 ）
*/
},
// --------------------------------------销毁 -------------
beforeDestroy () {
},
destroyed () {
}
})