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

相关推荐
我是伪码农1 分钟前
Vue 1.30
前端·javascript·vue.js
利刃大大9 分钟前
【Vue】默认插槽 && 具名插槽 && 作用域插槽
前端·javascript·vue.js
艳阳天_.13 分钟前
web 分录科目实现辅助账
开发语言·前端·javascript
小白640230 分钟前
2025年终总结-迷途漫漫,终有一归
前端·程序人生
烟花落o35 分钟前
贪吃蛇及相关知识点讲解
c语言·前端·游戏开发·贪吃蛇·编程学习
晚霞的不甘39 分钟前
Flutter for OpenHarmony专注与习惯的完美融合: 打造你的高效生活助手
前端·数据库·经验分享·flutter·前端框架·生活
kogorou0105-bit1 小时前
前端设计模式:发布订阅与依赖倒置的解耦之道
前端·设计模式·面试·状态模式
止观止1 小时前
像三元表达式一样写类型?深入理解 TS 条件类型与 `infer` 推断
前端·typescript
雪芽蓝域zzs1 小时前
uniapp 省市区三级联动
前端·javascript·uni-app
Highcharts.js1 小时前
Next.js 集成 Highcharts 官网文档说明(2025 新版)
开发语言·前端·javascript·react.js·开发文档·next.js·highcharts