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

相关推荐
yangzhi_emo几秒前
ES6笔记2
开发语言·前端·javascript
yanlele16 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子1 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !3 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt3 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端