option api & compose api

option api & compose api

<script setup>  
import { ref, computed } from 'vue';  

// 原始数据  
const data = ref([  
  { position: { x: 1, y: 2 } },  
  { position: { x: 3, y: 4 } },  
  { position: { x: 5, y: 6 } }  
]);  

// 数据转换函数  
const convertData = (sourceData) => {  
  try {  
    const paths = sourceData  
      .filter(item => item?.position && typeof item.position === 'object')  
      .map(item => item.position);  

    return [{  
      paths: paths  
    }];  
  } catch (error) {  
    console.error('数据转换错误:', error);  
    return [{ paths: [] }];  
  }  
};  

// 计算属性  
const convertTodata = computed(() => convertData(data.value));  

// 更新数据的方法  
const updateData = (newData) => {  
  data.value = newData;  
};  
</script>  

<template>  
  <div class="p-4">  
    <h2 class="text-xl mb-4">转换后的数据:</h2>  
    <pre class="bg-gray-100 p-4 rounded">  
      {{ JSON.stringify(convertTodata, null, 2) }}  // 使用 JSON.stringify 将 convertTodata 的结果格式化为 JSON 字符串并显示在页面
    </pre>  
  </div>  
</template>

<script>  
export default {  
  name: 'DataConverter',  
  
  // ref() -> data()  
  data() {  
    return {  
      // const data = ref([...]) 变成：  
      data: [  
        { position: { x: 1, y: 2 } },  
        { position: { x: 3, y: 4 } },  
        { position: { x: 5, y: 6 } }  
      ]  
    }  
  },  

  // computed() -> computed: {}  
  computed: {  
    // const convertTodata = computed(() => ...) 变成：  
    convertTodata() {  
      return this.convertData(this.data);  
    }  
  },  

  methods: {  
    convertData(sourceData) {  
      try {  
        const paths = sourceData  
          .filter(item => item?.position && typeof item.position === 'object')  
          .map(item => item.position);  

        return [{  
          paths: paths  
        }];  
      } catch (error) {  
        console.error('数据转换错误:', error);  
        return [{ paths: [] }];  
      }  
    },  

    // const updateData = (newData) => { data.value = newData } 变成：  
    updateData(newData) {  
      this.data = newData;  
    }  
  }  
};  
</script>  

<template>  
  <div class="p-4">  
    <h2 class="text-xl mb-4">转换后的数据:</h2>  
    <pre class="bg-gray-100 p-4 rounded">  
      {{ JSON.stringify(convertTodata, null, 2) }}  
    </pre>  
  </div>  
</template>  

<style scoped>  
.p-4 {  
  padding: 1rem;  
}  

.text-xl {  
  font-size: 1.25rem;  
  line-height: 1.75rem;  
}  

.mb-4 {  
  margin-bottom: 1rem;  
}  

.bg-gray-100 {  
  background-color: #f3f4f6;  
}  

.rounded {  
  border-radius: 0.25rem;  
}  
</style>

主要转换规则

1. ref() 转换:

   // Composition API  
   const data = ref([...])  
   
   // Options API  
   data() {  
     return {  
       data: [...]  
     }  
   }  
   

2. computed() 转换:

   // Composition API  
   const result = computed(() => {...})  
   
   // Options API  
   computed: {  
     result() {  
       return {...}  
     }  
   }  
   

3. 方法转换:

   // Composition API  
   const updateData = (newData) => {  
     data.value = newData  
   }  
   
   // Options API  
   methods: {  
     updateData(newData) {  
       this.data = newData  
     }  
   }  
   

4. 数据访问:

   // Composition API  
   data.value  
   
   // Options API  
   this.data