函数生命周期函数,Vue为例子 感谢：我是一名好程序员分享

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

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() 事件解绑