vue ref() 用法
在 Vue 中，`ref()` 是一个用于创建响应式引用的函数。它返回一个响应式引用对象，其中包含一个 `value` 属性，用于获取或设置引用的值。
以下是 `ref()` 的用法：
1. 创建一个响应式引用：
```javascript
import { ref } from 'vue';
const count = ref(0); // 创建一个名为 count 的响应式引用，初始值为 0
```
2. 使用 `value` 属性获取或设置引用的值：
```javascript
(); // 输出 0
= 10; // 设置 count 的值为 10
(); // 输出 10
vue中reactive
```
3. 在模板中使用响应式引用：
```html
<template>
  <div>
    <p>{{  }}</p> // 输出当前 count 的值
  </div>
</template>
```
4. 使用 `watch()` 方法监听引用的变化：
```javascript
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
  (`count changed from ${oldVal} to ${newVal}`);
});
++; // 触发监听函数，输出 "count changed from 0 to 1"
```
5. 使用 `reactive()` 代替 `ref()` 创建响应式对象：
在 Vue 3 中，推荐使用 `reactive()` 来创建响应式对象，因为它更加灵活，并且能够更好地处理复杂的数据结构。但如果你只需要一个简单的响应式引用，`ref()` 是更好的选择。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。