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函数将库的返回值包装为可响应式的引用对象

相关推荐
LiaCode5 小时前
别让 AI 把仓库写成“代码平行宇宙”:从 Deslop 看生成前查重
前端·后端·github
nice先生的狂想曲5 小时前
javascript高级程序设计(六)——2026.9.5
前端·javascript
光影少年6 小时前
如何做大型React+RN 项目架构设计、目录规范
前端·react native·react.js
一位正在转型AI全栈的前端工程师6 小时前
AI 全栈学习之旅 -Week 8:从单 Agent 到多 Agent 协作:LangGraph 实战与记忆持久化
前端·python
用户921080262866 小时前
Promise 和 async/await:从用途到执行机制
前端
yyt3630458416 小时前
KLineChartQuant:GLSL 的精度问题及 RTC 解法
前端·vue.js·react.js·交互·图形渲染·webgl·数据可视化
HarmonLTS6 小时前
智盾 WAF v8.2 Ultra|下一代 Web 应用防火墙
前端
এ慕ོ冬℘゜6 小时前
前端实战:基于jQuery递归实现通用树形组织菜单(可直接复用)
前端·javascript·jquery
计算机魔术师6 小时前
英伟达据报洽谈向 Mira Murati 的 Thinking Machines Lab 投资 25 亿美元
前端
变与不变8067 小时前
js函数与封装详细解答
前端·javascript·vue.js