【Vue 学习】生命周期

生命周期

<template>
  <div>
    <h2>当前n值是: {{ n }}</h2>
    <button @click="n++;">点我+1</button>
  </div>
</template>


<script>
export default {
  name:'App',
  data() {
    return {
      n: 1,
    }
  },
  // 在"数据监测、数据代理创建"之前：此时 vue 实例对象还没有绑定 data、方法、、、
  beforeCreate() {
    console.log('beforeCreate');
  },
  // 在"数据监测、数据代理创建"之后：此时 vue 实例对象已经绑定 data、方法、、、
  created() {
    console.log('created');
  },
  // 挂载之前，此时已经有了虚拟 DOM，但是还没有挂载到页面
  // 此时页面呈现的是未经编译的 DOM
  // 此时对 DOM 的操作，仅是临时有效果，最终会失效，因为最终会有 虚拟DOM 挂载到页面，重新渲染
  beforeMount() {
    console.log('beforeMount');
  },
  // 【重要的钩子1：】
  // 挂载成功之后，此时初始的真实 DOM 放入（挂载）到页面后调用
  // 至此，初始化过程结束了，一般在此时可以：开启定时器、发生网络请求、、、异步操作
  mounted() {
    console.log('mounted');
  },
  // vue数据更新之前，此时数据是新的，但是页面是旧的
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  // vue数据更新之后，此时数据和页面都是新的
  updated() {
    console.log('updated');
  },
  // 【重要的钩子2：】
  // 销毁之前，一般在此：关闭定时器、停止网络请求、、、异步操作，做一些收尾操作
  // 销毁之后：
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  // 销毁成功之后：【一般无用】
  // 可以访问数据，但是对数据的修改不会影响页面
  destroyed() {
    console.log('destoryed');
  },
}
</script>