Vue2选项式API和Vue3组合式API的区别

2024-05-13 15:08:34

文章目录

Vue2选项式API和Vue3组合式API的区别
- 响应式处理
- 组件生命周期
- 组件通讯
- 其他差异
- - 编译器的变化
  - TypeScript
  - 静态类型提升
- Vue2选项式API与Vue3组合式API 使用demo
- - Vue2选项式API
  - Vue3组合式API

Vue2选项式API和Vue3组合式API的区别

Vue2和Vue3都是前端开发中非常受欢迎的JavaScript框架，二者的API有着不同的设计理念，本文将从以下几个方面展示Vue2选项式API和Vue3组合式API的不同之处：

响应式处理
组件生命周期
组件通讯
其他差异

响应式处理

Vue2采用的是Object.defineProperty进行响应式处理，通过劫持数据的getter和setter来监听数据变化。Vue2的响应式处理有很多局限性，例如添加和删除属性，数组下标变更等都无法有效监听。

Vue3采用的是ES6的Proxy来处理响应式，不仅支持上述的所有情况，而且有更好的性能表现。在Vue3中，每个数据都使用Proxy进行了代理拦截，这使得Vue3的响应式处理更加方便、灵活和高效。

组件生命周期

Vue2的生命周期主要分为以下几个阶段： beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed。

Vue3的生命周期相比较Vue2而言，更加易于使用，分为三个阶段：setup, created, mounted。其中setup阶段被引入作为原来Vue2中的beforeCreate、created阶段的替代品，它负责组件的初始化和响应式数据的创建。

组件通讯

Vue2中组件通讯主要通过$emit和$on进行实现。 e m i t 用于子组件向父组件传递数据，而 emit用于子组件向父组件传递数据，而 emit用于子组件向父组件传递数据，而on则用于父组件接收子组件传递过来的数据。

Vue3中通过provide和inject来实现组件通讯，但是与Vue2不同的是，它是基于新的响应式API来实现的，它们之间可以多层嵌套传递数据，且避免了命名冲突。

其他差异

编译器的变化

Vue2中的编译器是一个单独的项目，它将template转化成render函数进行渲染。而在Vue3中，编译器被合并到了核心代码库中，便于维护。

TypeScript

Vue3完全支持TypeScript，这意味着开发者可以更加轻松、安全地编写Vue的组件。

静态类型提升

Vue3支持静态类型，将在编译期间进行类型检查，从而提高代码的健壮性和效率。

Vue2选项式API与Vue3组合式API 使用demo

Vue2选项式API

<template><div><h1>{{ msg }}</h1><button @click="changeMsg">更改信息</button></div>
</template><script>
export default {name: 'hello-world',data() {return {msg: 'Hello, World!'}},methods: {changeMsg() {this.msg = 'Hello, Vue2!'}}
}
</script>

Vue3组合式API

<template><div><h1>{{ state.msg }}</h1><button @click="changeMsg">更改信息</button></div>
</template><script>
import { reactive, toRefs } from 'vue';
export default {name: 'hello-world',setup() {const state = reactive({msg: 'Hello, World!'});const changeMsg = () => {state.msg = 'Hello, Vue3!'}return {...toRefs(state),changeMsg}}
}
</script>

这两段代码功能相同，但是语法上看起来完全不同，Vue3使用了新的API，相比Vue2更加易于使用和管理。

总之，Vue3的新API设计减轻了前端开发者的开发难度，并且提供了更多的便利、更好的性能、更丰富的生命周期方法、更完善的TS支持等等。Vue3的兴起也是前端发展的重要里程碑，可以让我们更好地服务用户，带领前端技术发展更迅速，实现更加美好的web世界。

Vue2选项式API和Vue3组合式API的区别相关推荐

Vue3 -- 组合式API
组合式API 组合式api(Composition API)算是vue3对我们开发者来说非常有价值的一个api更新,我们先不关注具体语法,先对它有一个大的感知 1. composition vs op ...
vue3 组合式API与响应性的概念理解和简析
目录 1. 组合式API简介 1.1. 组合式API是为了实现关注点抽离 1.1.1. 什么是关注点? 1.1.2. 为什么需要关注点抽离? 1.1.3. 组合式API是为了实现关注点抽离 2. 组合 ...
vue3组合式api
文章目录组合式API介绍什么是组合式 API? 为什么要有组合式 API? 更好的逻辑复用更灵活的代码组织 Option Api Option Api的缺陷 Composition Api 更好 ...
vue3组合式api基础（常用）
vue3组合式api基础(常用) 前言:vue3中尽量不要使用'this',最好使用组合式api(Composition API),如果使用uni-app的,vue3只支持ios>=10(201 ...
Vue3组合式Api script setup模式中顶层使用await报Top-level ‘await‘ expressions are only allowed when the ‘module‘
今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误(能正常编译),错误提示是: Top-level 'awa ...
Vue3 组合式API初体验
目录一.背景二.什么是组合式API(Composition API ) 组合式API全景为什么要引入组合式API `mixins` 的方式域插槽的方式组合式API的方式结论组合式API存 ...
vue3 组合式API使用第1篇-保证学得会
本文已参与「新人创作礼」活动,一起开启掘金创作之路 1. 了解组合式API 1.1 选项式API特点讲解 vue3 的组合式 API 之前,先来看看传统的选项式 API 的特点一个非常明显的优点就 ...
谈谈vue3组合式api的优势
vue2: options API 配置式使用传统Options API(配置式API)中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 . vue3: com ...
关于Vue3组合式API(Composition API)的个人理解
首先,关于组合式API现已有众多大佬发布了相关介绍及相关教程,但是个人在学习过程中还是花了比较多的时间去理解 " 组合式API " 这个概念. 因为目前搜索引擎排的比较前面的文章其 ...

最新文章

热门文章