当前位置：首页 > news >正文

2.14composition Api

news 2025/9/20 14:05:00

1.Setup函数体检

2.Setup定义数据

2.1默认定义的数据不是响应式的

setup 函数的返回值
setup 既然是一个函数，那么它也可以有返回值，它的返回值用来做什么呢？

setup 的返回值可以在模板template中被使用；

也就是说我们可以通过 setup 的返回值来替代data选项；
甚至是我们可以返回一个执行函数来替代在methods中定义的方法：
（左侧代码块）

js
const name = "coderwhy";
let counter = 100;
const increment = () => {counter++;
}
const decrement = () => {counter--;
}
（右侧返回值代码块）

js
return {name,counter,increment,decrement
}
但是，如果我们将 counter 在 increment 或者 decrement进行操作时，是否可以实现界面的响应式呢？

答案是不可以；

这是因为对于一个定义的变量来说，默认情况下，Vue 并不会跟踪它的变化，来引起界面的响应式操作；

2.2reactive的使用

定义复杂数据类型：对象和数组

如果想为在 setup 中定义的数据提供响应式的特性，那么我们可以使用reactive的函数：

js
const state = reactive({name: "coderwhy",counter: 100
})
那么这是什么原因呢？为什么就可以变成响应式的呢？

这是因为当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集；

当数据发生改变时，所有收集到的依赖都会进行对应的响应式操作（比如更新界面）；

2.3ref的使用（返回值是一个对象）

定义简单的数据类型（也可以定义复杂的数据类型）

reactive API 对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型：

如果我们传入一个基本数据类型（String、Number、Boolean）会报一个警告；

示例警告：value cannot be made reactive: Hello World

这个时候 Vue3 给我们提供了另外一个 API：ref API

ref 会返回一个可变的响应式对象，该对象作为一个 响应式的引用 维护着它内部的值，这就是ref名称的来源；

它内部的值是在ref的 value 属性中被维护的；

代码示例：const message = ref("Hello World");

这里有两个注意事项：

在模板中引入ref的值时，Vue 会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式来使用；

但是在 setup 函数内部，它依然是一个 ref引用，所以对其进行操作时，我们依然需要使用 ref.value的方式；