vue.js入门（六，生命周期）

生命周期是贯穿Vue项目的一个重要知识点（想更多了解的建议搜索类似的掘金文章，入门文章）

创建阶段（流程如下）

（初始化事件和生命周期）beforeCreate（数据观测、属性、侦听器配置等）——>created——>（模板编译到render）beforeMount——>render（挂载到DOM）——>mounted（异步请求、操作DOM、定时器等）

更新阶段（多次执行的阶段，$forceUpdate强制更新也会触发）

beforeUpdate——>render——>updated（更新代码中不能修改数据，不然会死循环）

销毁阶段

beforeDestory——>destoryed

DEMO

<template>
  <div>
    {{name}}
    <button @click="desc">修改</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name:'Vue'
    };
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
  methods:{
    desc(){
      this.name='123'
    }
  }
};
</script>

因为对象是无序的，位置在哪无所谓

接着触发更新，调用了更新函数

如果销毁组件的话，就不会发生更新了

  methods:{
    desc(){
      this.$destroy()
      this.name='123'
    }
  }

name更新失败
（先这样，后面可能写其他DEMO的时候会写到深入一些）