vue 选项式API与组合式API 结构对比

vue 选项式API（Options API）
<script>
export default {
  // 声明响应式对象数据
  data () {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      currentPage: 1, // 当前显示的页数
      totalPage: 0, // 一共有多少页
      timerId: null // 定时器的标识
    }
  },
  //created()是组件生命周期钩子函数之一，
  //用于在组件实例创建后、模板渲染前执行初始化操作，常用于数据获取或事件订阅。
  //此时DOM尚未挂载，无法直接操作HTML元素 。 ‌
  created () {
    // 在组件创建完成之后 进行回调函数的注册
    this.$socket.registerCallBack('hotData', this.getData)
  },
  // 计算属性,响应式缓存机制
//自动追踪依赖：当依赖的响应式数据变化时自动重新计算。‌‌
‌//结果缓存优化：相同依赖下多次访问直接返回缓存值，避免重复计算。‌‌
//计算属性必须返回有效值，且仅在其依赖项变化时更新。‌‌
//vs methods‌ 模板中以属性形式调用而非方法。‌‌
//vs watch‌ 声明式处理派生数据，无需显式监视依赖。‌‌更适合同步数据处理，watch适用于异步操作。‌‌
  computed: {
    catName () {
      if (!this.allData) {
        return ''
      } else {
        return this.allData[this.currentIndex].name
      }
    },
    comStyle () {
      return {
        fontSize: this.titleFontSize + 'px',
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
  //生命周期钩子,DOM挂载完成后调用
  mounted () {