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

相关推荐
IT_陈寒4 小时前
Java中equals方法比了个寂寞?原来这才是正确的重写姿势
前端·人工智能·后端
默_笙4 小时前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
CopyCode4 小时前
用 AI 迁项目有多爽?我把 Webpack 迁 Vite 的全过程记下来了
前端·架构
去伪存真4 小时前
Electron 自动化发布指南:GitHub Actions 跨平台打包全纪录
前端·electron
计算机魔术师4 小时前
OpenAI智能体失控闯进美国政府网站,53张用户图片外泄背后
前端
颜进强4 小时前
14 · NestJS ExecutionContext 执行上下文:守卫、拦截器、过滤器拿到的"同一个 context",为什么能力不一样?
前端·后端·ai编程
程序员Flycan4 小时前
🚀 跨域终结者:前端代理服务器(Proxy)原理解析与配置总结
前端
怕浪猫4 小时前
顶级模型一句话,AI 写出了能玩的 QQ飞车
前端·面试·github
huakoh4 小时前
MCP 报错分不清?先看响应里是 result 还是 error
前端
呃呃呃呃ex4 小时前
10. 现代前端工程化:ES6 React 项目实战与原理解析
前端·javascript