Componsition API与Options API属性写法

Composition API是Vue 3.0新增的API，主要是为了解决Options API在大型应用中难以维护的问题。与Options API相比，Composition API更加灵活，可以更好地组织逻辑代码，同时也提供了更好的类型推断和代码重用。

下面是Composition API和Options API各自的常见属性写法示例：

Composition API属性写法：

import { reactive, toRefs } from 'vue';

setup(props) {
  const state = reactive({
    count: 0,
    message: 'hello',
  });

  const increment = () => {
    state.count++;
  };

  const data = toRefs(state);

  return {
    ...data,
    increment,
  };
}

Options API属性写法：

export default {
  data() {
    return {
      count: 0,
      message: 'hello',
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};

需要注意的是，Composition API的属性写法和Options API有所不同，主要是使用了reactive和toRefs函数来定义响应式数据和将响应式数据转化为普通对象，同时使用了setup函数来进行组件的初始化。

在Composition API中，我们不再需要将数据和方法定义在不同的属性中，而是可以将它们放在同一个函数内部，更加直观和易于理解。另外，使用Composition API时需要注意其引入方式，因为它需要使用Vue 3.0的新版本才能正常运行。