<template>
  <div >
    <div id="dom" ref="pRef">{{ak}}{{aa}}</div>
    <button @click="aa='电饭锅'">改变自己组件</button>

  </div>
</template>

<script>
export default {
  props: {
    ak: {
      required: false,
      default: [],
      type: String,
    },
  },
  data() {
    return {
      aa: 1233,
    };
  },
  watch: {
    ak(cur, pre) {
      //watch功能是可以监听props和data
      console.log("======cur", cur);
      console.log("======pre", pre);
    },
    aa: {
      handler(cur, pre) {},
      immediate: true,
      deep: true,
    },
  },
  methods: {},
  beforeCreate() {
    //此处已经可以使用props,但无法使用data
  },
  created() {
    //此处已经可以使用props,并且可以使用data
  },
  beforeMount() {
    //当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
  },
  mounted() {
    this.sss = setTimeout(() => {
      console.log("======定时器");
    }, 90 * 1000);
    //此时才可以获取dom
  },
  beforeUpdate() {
    //此处获取的props和data都是已经更新后的值
    //此处获取的this.$refs.xxx.innerHTML是更新[前]的值
    //用原生document.getElementById获取的dom是更新完毕[后]的值
  },
  updated() {
    //此处获取的props和data都是已经更新后的值
    //此处获取的this.$refs.xxx.innerHTML是更新[后]的值
    //用原生document.getElementById获取的dom是更新完毕[后]的值
  },
  beforeUnmount() {
    //当这个钩子被调用时，组件实例依然还保有全部的功能,有props和data
    //还能使用this.$refs.xxx.innerHTML和document.getElementById("xxxx")
    //此处可以解除原生事件绑定removeEventListener("click", xxx);
  },
  unmounted() {
    //此处依然可以获取props和data
    //可以在这个钩子中手动清理一些副作用，例如计时器、服务器的连接。
  },
  errorCaptured() {},
  activated() {},
  deactivated() {},
};
</script>

<style>

</style>