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)    收藏  举报