Vue3基础

1.Vue.js3相较于Vue.js2在性能方面的改进点

响应式系统的重写

虚拟DOM的改进

更好的Tree Shaking支持

编译器的优化

销毁和卸载的改进

使用Proxy代替defineProperty实现数据响应式

2.新增的特性

1.Composition API:是一个新的组织组件逻辑的方式,允许按照功能逻辑进行组织,而不是按照选项(data、methods、computed)进行组织。与之前的 Options API 相比,Composition API 在处理复杂逻辑和组件复用方面更加强大和直观。

常用API包括

setup:组件实例化前被调用,可以用来设置组件数据、收集依赖、注册事件等

ref和reactive:用来声明响应式变量和对象

computed和watch:用于处理响应式变量和对象的变化

新的生命周期函数:

(待补充)

3.Composition API

核心函数包括:

1.setup

每次组件实例化时被调用,用于进行初始的配置和逻辑处理,类似于Options API中的beforeCreate和created钩子函数的功能,在setup函数,可以访问和操作props、context,还可以返回一个对象或一个渲染函数。

1)

(1)setup是一个专门用于组合式API的特殊钩子函数

(2)所有的组合API函数都在此使用,只在初始化时执行一次

(3)函数如果返回对象,对象中的属性或方法,模板中可以直接使用

2)setup()函数和<script setup>

在setup()函数中手动暴露大量的状态和方法非常繁琐,就可以使用<script setup>。

<script setup>,所有变量和函数都会被自动注入到组件的模板中。同时,由于使用了响应式数据和函数式编程的思想,组件逻辑代码也更加具有可重用性和可测试性。

2.ref

创建一个单一响应式的数据对象。ref只能用于包装单个值,并且在读取和修改值时需要通过value属性来进行操作。它类似于Options API中的data返回的响应式数据对象。

1)作用

ref函数用于将基本数据类型(字符串、数字、布尔等)转换为可响应式的引用对象

ref函数对于需要对基本类型数据进行状态管理和响应式更新的场景非常有用

2)语法

const name = ref("张三")

js中数据操作:name.value

模版中数据操作:不需要.value

3)应用场景

一般用来定义一个基本类型的响应式数据

管理表单输入值:可以使用ref函数将表单输入的值进行状态管理,实现数据的双向绑定

追踪计算属性:可以使用ref函数来管理一个依赖于其他响应式数据的计算属性,保证计算属性在依赖数据变化时进行更新

跟踪UI状态:可以使用ref函数来管理与UI 交互相关的状态,如控制弹窗的打开或关闭,切换开关的状态等

集成第三方库:在与第三方库集成时,可能需要使用ref函数将库的返回值包装为可响应式的引用对象

相关推荐
漂流瓶jz10 分钟前
理解Webpack插件机制:从插件使用、各类编译对象、Tapable到自定义插件与钩子开发
前端·javascript·webpack
梦帮科技10 小时前
GRAVIS v4.0:基于Web的极速套利架构设计与实时数据流实现
前端·人工智能·rust·自动化·区块链·智能合约·数字货币
爱勇宝11 小时前
办公资料反复修改、补传、交接混乱,我做了个桌面工具来解决这件事
前端·后端·程序员
微信开发api-视频号协议12 小时前
企业微信外部群开发自动化实践过程
java·前端·微信·自动化·企业微信·ipad
甲维斯12 小时前
Fable5:20美金的顶级设计师!
前端·人工智能
kyriewen12 小时前
我同时用了 Claude Code、Cursor 和 Codex,说说三个工具的真实差距——2026 年选错工具比不用 AI 更浪费时间
前端·ai编程·claude
Jackson__12 小时前
为了拯救我的腰椎和颈椎,我做了款浏览器插件!
前端·javascript·开源
闲猫12 小时前
Python FastAPI + SQLAlchemy 入门教程:从零搭建你的第一个 Web 应用
前端·python·fastapi
林小帅13 小时前
NestJS v11 + Prisma v7 ESM 迁移配置解析
前端·javascript·后端
IT_陈寒13 小时前
React的setState竟然不是立刻生效的,害我调试半天
前端·人工智能·后端