Vue中的生命周期函数

Vue中的生命周期函数

我们常见的生命周期函数有八个

1）beforeCreate 实例创建前
在这个函数中，我们一般进行的是初始化工作， 比如创建一个loading；

beforeCreate() {
   console.log(this.page); // undefined
   console.log{this.showPage); // undefined
 },
 data() {
   return {
     page: 123
   }
 },
 methods: {
   showPage() {
     console.log(this.page);
   }
 }

2）Created 实例创建后

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

created() {
   console.log(this.page); // 123
   console.log{this.showPage); // ...
 },
 data() {
   return {
     page: 123
   }
 },
 methods: {
   showPage() {
     console.log(this.page);
   }

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

.beforeCeate(){
    console.log(this.rendered);    // undefined  
}

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

mounted() {
    console.log(this.$el);
}

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

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

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

.beforeDestroty(){
    console.log(this.$el);
    console.log(this.rendered); 
}

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

destroyed() {
    console.log(this.$el);
    console.log(this.rendered);
}

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

2.5.0+新增当捕获一个来自子孙组件的错误时被调用errorCaptured