Vue-开发方式-CSDN博客

本文链接：https://blog.csdn.net/weixin_42555643/article/details/137133658

Vue.js 提供了两种主要的开发方式：选项式开发（Options API）和组合式开发（Composition API）。

1.选项式开发（Options API）：

在选项式开发中，Vue 组件使用对象形式来定义其选项，例如 data、methods、computed、watch 等选项。
在组件中，使用 this 来访问组件实例的属性和方法。
这种开发方式适合于简单的组件和项目，易于理解和上手，但随着组件的复杂度增加，组件选项变得庞大和难以维护。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

2.组合式开发（Composition API）：

在组合式开发中，Vue 提供了 setup 函数，允许开发者使用函数来组织组件的逻辑代码。
在 setup 函数中，可以使用响应式 API（如 ref、reactive、computed 等）来声明响应式数据，以及导出需要在模板中使用的变量和函数。
这种开发方式更加灵活，允许开发者根据功能或逻辑来组织代码，使代码更易于维护和复用，尤其适用于复杂的组件和大型项目。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue!');
    const count = ref(0);

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

    return {
      message,
      increment
    };
  }
};
</script>