生命周期函数

一个组件从创建到销毁的过程就叫做生命周期

beforeCreate（）{ } 创建前
我们一般在这个生命周期函数中进行初始化工作，我们可以创建一个loading；

created （）{ } 创建后
我们可以在这个生命周期函数中访问 new Vue（）中的所有属性和方法
在这个生命周期函数中，会将data中所有属性和methods中所有的方法都挂载到 new Vue（）的实例化对象上
在这个生命周期函数中，会给data的所有属性都添加一个getter/setter方法，有了这两个方法，我们可以对数据进行动态操作 ； 故，若要和后端进行数据交互，必须在该函数中进行

beforeMount （）{ } 挂载前
数据和模块还未进行结合
我们还可以对数据进行最后的更改
我们在这个生命周期函数中不能访问到真实的DOM结构

mounted（）{ } 挂载后
数据和模块已经融合
我们可以通过 this.$refs.值 来访问DOM结构
注：标签的ref = “值是唯一的" ， 该属性类似于id

beforeUpdate（）{ } 更新前
在这个声明周期函数中可以访问到真实的DOM结构
我们可以对数据做最后的修改
注：该函数中数据和模板还未更新完毕

update（）{ } 更新后
在这个生命周期函数中，我们可以访问到 最新的 DOM结构
注：由于这个生命周期函数是频繁被触发的，所以我们若要在该函数中绑定一些事件或进行实例化的时候需要做一个提前判断 if（!....）{ }

beforeDestroy（）{ } 销毁前
在这个生命周期函数中，我们还继续可以访问到DOM结构
我们一般在这个函数中做一些事件的解绑/移除操作

destroyed（）{ } 销毁后
数据和dom的关联已经断开
在这个生命周期函数中是访问不到真实的dom结构的

 

 

 

new Vue() 实例化对象的方法
$mount( ) 手动挂载
$destroy() 手动销毁
$forceUpdate() 强制更新
$on() 事件绑定
$emit() 事件触发
$once() 事件仅绑定一次
$off() 事件解绑