当前位置:  首页>> 技术小册>> Vue面试指南

Vue3.0 Composition API 和 Vue2.x Options API 是两种不同的编写组件的方式,它们的主要区别在于:

代码结构:Vue2.x Options API 采用声明式的方式,将组件的逻辑分散到不同的选项中,而 Vue3.0 Composition API 则是采用了函数的方式来组织逻辑,将逻辑按照功能划分到不同的函数中。

可复用性:Vue3.0 Composition API 提供了更好的代码组织方式和更高的可复用性。它允许将逻辑抽象为可重用的函数,并通过组合这些函数来创建自定义的逻辑。

下面是一个使用 Vue2.x Options API 的示例代码:

  1. <template>
  2. <div>{{ count }}</div>
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. count: 0
  9. }
  10. },
  11. methods: {
  12. increment() {
  13. this.count++
  14. }
  15. },
  16. mounted() {
  17. setInterval(this.increment, 1000)
  18. }
  19. }
  20. </script>

上面的代码中,我们使用了 Vue2.x Options API 来编写组件,将组件的逻辑分散到了不同的选项中。

下面是同样的组件使用 Vue3.0 Composition API 编写的示例代码:

  1. <template>
  2. <div>{{ count }}</div>
  3. </template>
  4. <script>
  5. import { ref, onMounted } from 'vue'
  6. export default {
  7. setup() {
  8. const count = ref(0)
  9. const increment = () => {
  10. count.value++
  11. }
  12. onMounted(() => {
  13. setInterval(increment, 1000)
  14. })
  15. return { count }
  16. }
  17. }
  18. </script>

上面的代码中,我们使用了 Vue3.0 Composition API 来编写组件。可以看到,组件的逻辑被划分到不同的函数中,这样可以使代码更加清晰、易于维护,并且可以实现更高的可复用性。同时,Vue3.0 Composition API 还提供了一些新的 API,如 ref、computed、watch 等,可以更方便地处理数据、计算属性和监听数据变化。


该分类下的相关小册推荐: