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