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