vue生命周期

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

一。vue生命周期

1.什么是生命周期

①.又名:生命周期回调函数、生命周期函数、左命周期钩子。

②.是什么: Vue在关键时刻帮我们调用的-些特殊名称的函数。

③.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

④.生命周期函数中的this指向是vm或组件实例对象。

2.生命周期函数

① 创建之前

    beforeCreate() {
        // 此时：无法访问到data中的数据，methods中的方法
        console.log(`beforeCreate,${this.n}`)
        debugger
    }

②。创建完成

created() {
      // 此时：可以通过vm访问到data中的数据，methods中配置的方法
      console.log(`created,${this.n}`)
      debugger
    },

③。 挂载之前

 beforeMount() {
  // 此时： 1.页面呈现的是未经vue编译的dom结构。
  // 2.所有对dom的操作，最终都不奏效
  console.log(`beforeMount,${this.n}`)
  debugger
}

④。挂载完成

      mounted() {
      // 此时:1.页面中呈现的是经过vue编译的dom。对dom的操作均有效(尽可能避免)。
      // 至此初始化过程结束，一般在此进行:开启 定时器、发送网络请求、订阅消息、鄉定自 定义事件、等初始化操作。
      console.log(`mounted,${this.n}`);
      debugger;
    },
    

⑤。数据更新之前

    beforeUpdate() {
        // 数据是新的，但页面是旧的，即：页面尚未和数据保持同步
        console.log(`beforeUpdate,${this.n}`)
        debugger
    },

⑥。数据更新完成

    updated() {
      // 此时数据是新的，页面也是新的，即：页面和数据保持同步
      console.log(`updated,${this.n}`);
      debugger;
    },

⑦。销毁之前

        beforeDestroy() {
      // 此时(vm中所有的:data,methods,指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段，关闭定时器，取消订阅，解绑自定义事件等收尾工作)
      console.log(`beforeDestroy,${this.n}`);
      debugger;
    },

⑧。销毁之后

    destroyed() {
        // 此时methods，watch，子组件都不可以使用
      console.log(`destroyed,${this.n}`);
      debugger;
    },