Vue生命周期简介

Vue 是一套用于构建用户界面的渐进式框架。

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 创建了一个Vue实例
})

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期（Life Cycle）：指的是一个组件从创建=>运行=>销毁的阶段，强调的是一个时间段。

生命周期图示：

#生命周期钩子：

第一阶段：创建

1.beforeCreated:在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用（此时props/data/methods尚未被创建，都不可用）。

<script>
export default {
    props: ['info'], // info传值为：你好
    data() {
        return {
            message: 'hello'，
    },
    methods: {
        show() {
            console.log('调用了Text组件的show方法!');
        }
    },
    // 生命周期第一个阶段的函数
    beforeCreate() {
         console.log(this.info); // 控制台显示 undefined
         console.log(this.message); // undefined
         this.show(); // 报错
    }
    
}
</script>

2.created：在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数（此时props/data/methods已经被创建好，都可用，但组件模板结构尚未生成）。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

<template>
  <div class="test-container">
      <h3 id="myh3">Text.vue组件</h3>
  </div>
</template>

<script>
export default {
    props: ['info'], // info传值为：你好
    data() {
        return {
            message: 'hello'，
    },
    methods: {
        show() {
            console.log('调用了Text组件的show方法!');
        }
    },
    // created生命周期函数，非常常用
    // 该函数常用于Ajax请求，经常在它里面，调用methods中的方法，请求服务器数据
    // 并且，把清求到的数据，转存到data中，供template模板渲染使用
    Created() {
         console.log(this.info); // 你好
         console.log(this.message); // hello
         this.show(); // 调用了Text组件的show方法!
         const dom = document.querySelector('#myh3');
         console.log(dom); // null   因为此时组件模板结构还未被渲染，所以获取不了元素
    }
    
}
</script>

3.beforeMount：此时已经编译好的HTML结构，但还未渲染到浏览器中，此时浏览器还没有当前组件的DOM结构（只是内存中有DOM结构）。

4.mounted：此时已经把内存中的HTML结构，成功的渲染到浏览器里，浏览器已经包含当前组件的DOM结构（最早可在该阶段操作当前组件的DOM）。

<template>
  <div class="test-container">
      <h3 id="myh3">Text.vue组件</h3>
  </div>
</template>

<script>
export default {
    props: ['info'], // info传值为：你好
    data() {
        return {
            message: 'hello'，
    },
    methods: {
        show() {
            console.log('调用了Text组件的show方法!');
        }
    },
    beforeMount() {
         const dom = document.querySelector('#myh3');
         console.log(dom); // null   因为此时组件模板结构还未被渲染，所以获取不了元素
    }，
    mounted() {
         const dom = document.querySelector('#myh3');
         console.log(dom); // dom在控制台显示成功
    },
    
}
</script>

第二阶段：运行

5.beforeUpdate：在数据发生改变后（数据变了才会触发该函数），DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它（此时data数据是更新了的，但UI结构是旧的，还未重新渲染新的模板结构）。

6.updated：根据最新的数据，组件的 DOM 已经渲染到浏览器中，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用 计算属性 或 watcher 取而代之。

注意：只有当数据变化时，beforeUpdate和updated才会执行，也就意味着运行阶段这两个函数最少是执行0次（当数据不发生改变时）。

第三阶段：销毁

7.beforeDestroy：将要销毁该组件，但尚未销毁，组件还处于正常工作。在这一步，实例仍然完全可用。

8.destroyed：销毁当前组件的数据侦听器，子组件，事件监听。

#特殊生命周期钩子

注意：只有当组件用到了<keep-alive></keep-alive>才能使用activated，deactivated。如果没有使用<keep-alive></keep-alive>则不存在这两个函数。

9.activated：被 keep-alive 缓存的组件激活时调用。

10.deactivated：被 keep-alive 缓存的组件失活时调用（并未被销毁）。

// App.vue根组件的代码如下：
<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <button @click="comName = 'Left'">展示Left</button>
    <button @click="comName = 'Right'">展示Right</button>
    <div class="box">
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';
export default {
  data() {
    return {
      comName: 'Left',
    }
  },
  components: {
    Left,
    Right,
  }
}
</script>


// Left和Right是App.vue子组件
// Left组件代码如下：
<script>
export default {
  data() {
    return {
      count: 1,
    }
  },

  // activated,deactivated只有当组件用到了<keep-alive></keep-alive>才能使用
  activated() {
    console.log('Left组件被激活了,activated');
    // 当点击 App.vue的 展示Left 这个按钮会打印  Left组件被激活了,activated
  },                    
  deactivated() {
    console.log('Left组件失活了,deactivated');
    // 当点击 App.vue的 展示Right 这个按钮会打印  Left组件失活了,deactivated
  }
}
</script>

#新增一个钩子函数

11.errorCaptured：在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。