细说vue生命周期

一、官网生命周期图

在写这篇文章之前，看了很多其他人的文章，所以在写之前还是按照惯例先去官网扒图：

图片乍一看，里面包含的内容很多，但是不要慌，看完我后面的内容再回来细品这张图。

二、vue生命周期里都会发生些什么

一、八个钩子函数

• beforeCreate（创建前）
• created（创建后）
• beforeMount(载入前)
• mounted（载入后）
• beforeUpdate（更新前）
• updated（更新后）
• beforeDestroy（销毁前）
• destroyed（销毁后）

二、看看demo里都会发生什么

1.首先在vue的单文件组件中写入如下代码：

export default {
   
  name: 'Home',
  components: {
   
    HelloWorld
  },
  data(){
   
    return{
   
      testData:'我是data中的数据'
    }
  },
   beforeCreate: function () {
   
      console.log('--------------beforeCreate----------------');
      console.log("元素是否挂载:" + this.$el);
      console.log("data中数据是否绑定:" + this.$data);
      console.log("data中的测试数据:" + this.testData);
  },
  created: function () {
   
      console.log('---------------created-------