Vue每个生命周期的具体介绍：
beforeCreate（）{}：Vue创立前，此阶段为实例初始化之后，this指向创立的实例，数据察看,数据监听事件机制都未造成，不能取得DOM节点。data，computed，watch，methods 上的办法和数据均不能拜访，注：date和methods的数据都还未初始化。

Created（）{}： Vue创立后，此阶段为实例初始化之后，data、props、computed的初始化导入实现， 注：要调用methods中的办法，或者操作data中的数据，最早只能在Created中操作

能拜访 data computed watch methods 上的办法和数据，初始化实现时的事件写这个外面，

此阶段还未挂载DOM。

beforeMount（）{}: Vue载入前，阶段执行时， 模板曾经在内存中编译好了，然而未挂载到页面中，（页面还是旧的）

注：这个阶段是过渡性的，个别一个我的项目只能用到一两次。

Mounted（）{}：Vue载入后，(实现创立vm.$el，和双向绑定)； 只有执行完mounted,就示意整个Vue实例曾经初始化实现了，此时组件曾经脱离里了创立阶段， 进入到了运行阶段。

beforeUpdate（）{}:Vue更新前， 当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时date数据是最新的，页面尚未和最新数据数据放弃同步。然而DOM中的数据会扭转，这是vue双向数据绑定的作用，可在更新前拜访现有的DOM，如手动移出增加的事件监听器。

Updated（）{}：Vue更新后， Updated执行时数据曾经放弃同步了，都是最新的，

实现虚构DOM的从新渲染和打补丁。
组件DOM已实现更新，可执行依赖的DOM操作。

留神：不要在此函数中操作数据（批改属性），否则就会陷入死循环。

beforeUnmount（）{}：（Vue销毁前，可做一些删除提醒，比方：您确定删除**吗？）

当执行beforeDestroy的时候，Vue实例就曾经从运行阶段进入到销毁阶段了。实例上的所有date和methods以及过滤器和指令都是处于可用状态，此时还没有真正的执行销毁过程。

unmounted（）{}：Vue销毁后, 当执行到destroted函数的时候，组件曾经齐全销毁（渣都不剩），此时组件中的所有的数据，办法，指令，过滤器...都曾经销毁（不可用了）。

create

  • App.vue
<script>import Hello from "./components/Hello.vue";export default {  data() {    return {      message: '',    };  },  methods:{    getChildMsg:function (value){      console.log(value);      this.message=value    }  },  components:{    Hello  }}</script><template>  <div>    <Hello/>  </div></template>
  • Hello.vue
<template>    <div>Hellokugou</div>  </template><script>export default {  data(){    return{      counter: 0,    };  },  beforeCreate() {    console.log('beforeCreate');  },  created() {    console.log('created');  },  beforeMount() {    console.log('beforeMount');  },  mounted() {    console.log('mounted');  },  beforeUpdate() {    console.log('beforeUpdate');  },  updated() {    console.log('updated');  },  beforeUnmount() {    console.log('beforeUnmount');  },  unmounted() {    console.log('unmounted');  },  name: "Hello"}</script><style scoped></style>

update

  • App.vue
<script>import Hello from "./components/Hello.vue";export default {  data() {    return {      message: '',    };  },  methods:{    getChildMsg:function (value){      console.log(value);      this.message=value    }  },  components:{    Hello  }}</script><template>  <div>    <Hello/>  </div></template>
  • Hello.vue
<template>  <div>    <div>Hellokugou</div>    <h2>{{counter}}</h2>    <button @click="counter++">change counter</button>  </div></template><script>export default {  data(){    return{      counter: 0,    };  },  beforeCreate() {    console.log('beforeCreate');  },  created() {    console.log('created');  },  beforeMount() {    console.log('beforeMount');  },  mounted() {    console.log('mounted');  },  beforeUpdate() {    console.log('beforeUpdate');  },  updated() {    console.log('updated');  },  beforeUnmount() {    console.log('beforeUnmount');  },  unmounted() {    console.log('unmounted');  },  name: "Hello"}</script><style scoped></style>

销毁

  • App.vue
<script>import Hello from "./components/Hello.vue";export default {  data() {    return {      message: '',      isShow: true    };  },  methods:{    getChildMsg:function (value){      console.log(value);      this.message=value    }  },  components:{    Hello  }}</script><template>  <div>    <Hello v-if="isShow"/>    <button @click="isShow=!isShow">销毁Hello组件</button>  </div></template>
  • Hello.vue
<template>  <div>    <div>Hellokugou</div>    <h2>{{counter}}</h2>    <button @click="counter++">change counter</button>  </div></template><script>export default {  data(){    return{      counter: 0,    };  },  beforeCreate() {    console.log('beforeCreate');  },  created() {    console.log('created');  },  beforeMount() {    console.log('beforeMount');  },  mounted() {    console.log('mounted');  },  beforeUpdate() {    console.log('beforeUpdate');  },  updated() {    console.log('updated');  },  beforeUnmount() {    console.log('beforeUnmount');  },  unmounted() {    console.log('unmounted');  },  name: "Hello"}</script><style scoped></style>