基于一个时间倒计时vue文件，对组件封装的理解

1.纯模板子组件页面，不需要交互逻辑

<template>
  <div class="time-box">{{dataNow}}</div>
</template>

<script>
export default {
  name: "Timebox",
  data() {
    return {
      dataNow: "",
      timerId: null
    };
  },
  mounted() {
    this.gw_now();
    this.timerId = setInterval(() => {
      this.gw_now();
    }, 1006);
  },
  methods: {
    gw_now_addzero(temp) {
      return temp < 10 ? "0" + temp : temp;
    },
    gw_now() {
      var obj;
      var date = new Date();
      var year = date.getFullYear();
      var month = this.gw_now_addzero(date.getMonth() + 1);
      var day = this.gw_now_addzero(date.getDate());
      var hour = this.gw_now_addzero(date.getHours());
      var minute = this.gw_now_addzero(date.getMinutes());
      var second = this.gw_now_addzero(date.getSeconds());
      var week;
      switch (date.getDay()) {
        case 0:
          week = "星期天";
          break;
        case 1:
          week = "星期一";
          break;
        case 2:
          week = "星期二";
          break;
        case 3:
          week = "星期三";
          break;
        case 4:
          week = "星期四";
          break;
        case 5:
          week = "星期五";
          break;
        case 6:
          week = "星期六";
          break;
      }
      obj =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        week +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      this.dataNow = obj;
    }
  },
  destroyed() {
    clearInterval(this.timerId);
    this.timerId = null;
  }
};
</script>

<style>
.time-box {
  width: 100%;
  height: 100%;
}
</style>

2.补充说明或总结

1. 也许是封装组件的第一步，代码抽离，把不包含交互逻辑的公共代码抽离出来。
2. 代码抽离：不需传参，逻辑简单，复制粘贴，类似HTML页面，公共头部和底部（数据静态）。
3. 组件封装：数据交互逻辑，父子组件传值，插槽等（页面壳子静态，数据动态）。