VUE3组合式API

create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了vite,为开发提供极速相应

使用create-vue

1.安装16.0或者更高版本的Node.js

2.npm init vue@latest指令会安装并执行create-vue

项目目录和关键文件

组合式API

Vue 3引入了组合式API（Composition API），这是一套全新的API，旨在解决大型组件逻辑复杂难以维护的问题，同时提供更灵活和可重用的代码组织方式。组合式API使得组件逻辑可以按照功能进行拆分，使得代码更加清晰、易于理解和维护。

setup

写法：如下图所示：

执行时机：在组件进行渲染之后会优先执行setup函数，如下周期图所示：

setup选项中写代码的特点：

如果在setup函数里声明的变量和方法，需要return出去才能够使用，如下图所示：

<script setup>语法糖

经过语法糖封装后简化了setup的使用，如下所示：

注意：在setup中的this不再指向组件实例了，而是指向undifined

reactive()

作用:接受对象类型数据的参数传入并且返回一个响应式对象

使用方法：

1.从vue包中导入reactive函数

2.在<script setup>中执行reactive函数并且传入类型为对象的参数，并使用变量接受响应式对象返回值

响应式对象可以影响视图的更新，如下案例所示：

但是reactive只能接受对象类型参数，不支持简单类型参数，针对于此推出了ref()

ref()

作用：接受简单类型或者对象类型的数据并且返回一个响应式对象

使用方法：

1.从vue包中导入ref函数

2.在<script setup>中执行ref函数并且传入初值，并使用变量接受响应式对象返回值

如下是一个ref使用案例：

reactive VS ref?

1.reactive不能处理简单类型的数据

2.ref参数类型支持更好但是必须通过.value访问修改

3.ref函数的内部实现依赖于reactive函数

computed计算属性函数

使用方式：

1.导入computed函数

2.执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

如下是一个案例：

注意：计算属性应该是只读的

watch函数

作用：侦听一个或者多个数据的变化，数据变化的时候立刻执行回调函数

两个额外参数：1.immediate(立即执行) 2.deep(深度侦听)

使用方法：

• 侦听单个数据
• 1.导入watch函数
• 2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
• 注意：watch第一个参数是不需要使用ref.value的，会自动处理
  • 
• 同时监听多个响应式数据的变化，不管哪个数据变化都需要执行回调
• • 

• immedite

• 说明：在侦听器创建的时候立即执行回调，响应式数据变化后继续执行回调  ​
• deep
• 默认使用watch监听的ref对象是浅层监听的，直接修改嵌套的对象是不会触发回调执行的，需要开启deep(depp一旦开启会执行递归调用，所以一般不建议开启，建议使用精确监听)

• 精确监听对象的某个属性
• 那么怎么在不开启deep的情况下侦听对象的某个属性，可以把第一个参数也替换成回调函数，返回需要侦听的属性就行

周期函数

基本使用:

1.导入

2.执行函数，传入参数

注意：如果是多次调用，那么会在时机成熟的时候依次执行

组合式API下的组件数据向下传递

基本思想

1.父组件中给子组件绑定属性

2.子组件通过props选项接受

在Vue3中局部组件不需要注册就可以直接使用了

组合式API下的组件数据向上传递

基本思想

1.父组件中给子组件标签通过@绑定事件

2.子组件中通过$emit方法触发事件

模板引用

在vue2中通过ref标识获取真实的dom对象或者组件实例对象

vue3中使用方法

1.调用ref函数生成一个ref对象

2.通过ref表示绑定ref对象到标签，然后dom对象就会保存到ref对象.value中

defineExpose

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问

provide和inject

作用场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

使用方法：

1.在顶层组件使用provice函数提供数据

2.在底层组件使用inject函数获取数据

如下是一个小案例：

还可以传递方法：