vue3 与 vue2的区别，以及优势

前端赵哈哈
357 阅读2分钟

vue3 与 vue2的区别，以及优势

区别

1.api风格不同
vue2使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。 vue3使用组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。 选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

2.新特性 它包含了一些 Vue 2 中没有的新特性 (比如 Teleport、Suspense，以及多根元素模板)。同时它也包含了一些与 Vue 2 非兼容性的变更。 3. 浏览器兼容，vue3支持原生支持 ES2015 的浏览器，ie11不在范围之内，如果要支持最好使用vue2 4. 维护，Vue 2 在 2023 年底将到达它的截止维护日期

优势

  1. 速度快，Vue 在 js-framework-benchmark 中的表现比 React 和 Angular 要好得多

跑分的侧重点在于原始渲染性能在特定情况下的优化，因此不能完全代表真实世界的性能结果。

  1. 体积小，对于一个 Vue 的最少 API 使用的 hello world 应用来说，配合最小化和 brotli 压缩，其基线大小只有 16kb 左右。但实际的应用大小取决于你使用了多少框架的可选特性。在极端情况下，如果一个应用使用了 Vue 提供的每一个特性，那么总的运行时大小大约为 27kb。
  2. 支持大规模场景
    • 单文件组件提供了一个模块化的开发模型，让应用的不同部分能够被隔离开发。
    • 组合式 API 提供一流的 TypeScript 集成，并为组织、提取和重用复杂逻辑提供了简洁的模式。
    • 全面的工具链支持使得开发体验在应用增长的过程中依然可以保持平滑。
    • 较低的入门门槛和优秀的文档能够显著降低新手开发者的入职和培训成本。

什么是“组合式函数”？

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 lodash 或是 date-fns。

相比之下，有状态逻辑负责管理会随时间而变化的状态。

鼠标跟踪器示例

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const x = ref(0)
const y = ref(0)

function update(event) {
  x.value = event.pageX
  y.value = event.pageY
}

onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

我们可以把这个逻辑以一个组合式函数的形式提取到外部文件中：

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

cn.vuejs.org

与其他模式的比较

1.vue2 mixins选项缺陷，不清晰的数据来源，命名空间冲突，隐式的跨 mixin 交流，vue3虽然保留，但是不建议

和无渲染组件的对比

组合式函数相对于无渲染组件的主要优势是：组合式函数不会产生额外的组件实例开销。当在整个应用中使用时，由无渲染组件产生的额外组件实例会带来无法忽视的性能开销。

和 React Hooks 的对比

组合式函数借鉴了react Hooks，逻辑复用上相似，但是，Vue 的组合式函数是基于 Vue 细粒度的响应性系统，这和 React hooks 的执行模型有本质上的不同。

avatar
文章
阅读
粉丝