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

vue 选项式API（Options API）
<script>
export default {
  // 声明响应式对象数据
  data () {
    return {
      chartInstance: null,
      allData: null,
      currentIndex: 0, // 当前所展示出的一级分类数据
      titleFontSize: 0
    }
  },
  //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 () {
    this.initChart()
    // this.getData()
    this.$socket.send({
      action: 'getData',
      socketType: 'hotData',
      chartName: 'hot',
      value: ''
    })
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  //钩子函数在组件销毁后调用，主要用于清理资源，如解除事件监听、清除定时器等。
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
    this.$socket.unRegisterCallBack('hotData')
  },
  // methods对象包含多个方法，每个方法是一个普通函数，用于响应用户交互（如点击事件）或处理数据。通过this可访问组件的数据和其他属性。
  methods: {
    initChart () {
        this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme)
        const initOption = {
        title: {
          text: '▎ 热销商品的占比',
          left: 20,
          top: 20
        },
        legend: {
          top: '15%',
          icon: 'circle'
        },
        this.chartInstance.setOption(initOption)
    },
    getData (ret) {
      this.allData = ret
      console.log(this.allData)
      this.updateChart()
    },
    updateChart () {
    },
    screenAdapter () { 
    },
  },
  //响应式监听‌：通过声明式配置观察‌data/‌computed属性变化，支持获取新旧值参数。‌‌
  watch: {
    theme () {
      console.log('主题切换了')
      this.chartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updateChart() // 更新图表的展示
    }
  }
}

</script>

vue 组合式API（Composition API）

<script setup>

import { ref, onMounted,created,destroyed,watch, computed} from 'vue';

//声明响应式数据
const chartInstance = ref(null); 
const allData = ref([]);
const currentIndex = ref(0);
const titleFontSize = ref(0);

// 声明函数方法 methods
function initChart () {
      const ctx = document.getElementById('myChart').getContext('2d');
      chartInstance.value = new Chart(ctx, { /* 配置 */ });
    }
function  getData (ret) {
      this.allData = ret
      console.log(this.allData)
      this.updateChart()
    }
function updateChart () {
    }

function  screenAdapter () { 
    }

created (()=> {
    // 在组件创建完成之后 进行回调函数的注册
    this.$socket.registerCallBack('hotData', this.getData)
  }    
);

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'])
  }
)

//生命周期钩子,构造函数
onMounted(() => {
   this.initChart()
    // this.getData()
    this.$socket.send({
      action: 'getData',
      socketType: 'hotData',
      chartName: 'hot',
      value: ''
    })
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
    console.log('Vue已经挂载完毕了');
});

destroyed (()=>{
    window.removeEventListener('resize', this.screenAdapter)
    this.$socket.unRegisterCallBack('hotData')
  },
);

watch( ()=>{
    theme () {
      console.log('主题切换了')
      this.chartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updateChart() // 更新图表的展示
    }
 }
 );
 
</script>

要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们：

<script>

import { ref } from 'vue'

export default {
 // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      count,
      increment
    }
  }
}
</script>

<template>
<button @click="increment">
  {{ count }}
</button>
</template>

如果直接像这样声明数据：const count = 0;
然后在函数中直接使用count++来修改数据，这样是无法实现响应式更新的。一定要注意在组合式 API 中，通常需要把数据定义为响应式数据，即使用ref函数或其他相关函数来声明。