Vue面试题49:Composition APl 与 Options API 有什么不同?(总结自B站up主‘前端杨村长’视频,仅供自用学习)

  • 分析

    • composition API是vue3最重要更新之一;

    • 它具有一系列优点,针对Options APl暴露的一些问题量身打造;

    • 是vue3推荐的写法,掌握它对掌握好Vue3至关重要;

    • 灵感源于react hooks, 又青出于蓝;

  • 体验

    • options api:
  • <template>
      <h1>{{ count }}</h1>
      <button @click="increment">click</button>
    </template>
    
    <script>
    export default {
      data() {
        return {
          count: 0
        }
      },
      methods: {
        increment() {
          this.count++
        }
      },
      mounted() {
        console.log(`The initial count is ${this.count}`)
      }
    }
    </script>
    
    • composition api:更好的逻辑复用和更灵活的代码组织
  • <template>
      <h1>{{ count }}</h1>
      <button @click="increment">click</button>
    </template>
    
    <script setup>
    import { useCount } from "../hooks/useCount"
    const { count, increment } = useCount()
    </script>
    
    // useCount.js
    import { ref } from "vue"
    export function useCount() {
      const count = ref(0)
      const increment = () => {
        count.value++
      }
      return {
        count,
        increment,
      }
    }
    
  • 思路

    • 总述不同点;

    • 开发动机;

    • 如何选择;

  • 回答范例

    • Composition API是一组API,包括:Reactivity APl、生命周期钩子、依赖注入,使用户可以通过导入函数方式编写vue组件,使得组件的可复用性、可维护性和可读性更强;而Options API则通过声明组件选项的对象形式编写组件;

    • Composition API最主要作用是能够简洁、高效的复用逻辑;解决了过去options API中mixins的各种缺点(命名冲突、来源不明);另外Composition API具有更加敏捷的代码组织能力,很多用户喜欢options API,认为所有东西都有固定位置的选项放置代码,但是单个组件增长过大之后这反而成为限制,一个逻辑关注点分散在组件各处,形成代码碎片,维护时需要反复横跳,而Composition API则可以将它们有效组织在一起;最后composition API拥有更好的类型推断,对ts支持更友好, options API在设计之初并未考虑类型推断因素,虽然官方为此做了很多复杂的类型体操,确保用户可以在使用options API时获得类型推断,然而还是没办法用在mixins和provide/inject上;

    • vue3首推Composition API,但是这会让我们在代码组织上多花点心思,因此在选择上,如果我们项目中只有一些低复杂度的场景, options API仍是一个好选择;而对于那些大型,高扩展,强维护的项目上,composstion API 会获得更大收益;

  • 追问:

posted @ 2022-11-16 11:07  Mochenghualei  阅读(340)  评论(0)    收藏  举报