vue3非响应式转响应式
在Vue 3中，可以使用`ref`和`reactive`函数将非响应式的数据转换为响应式的。
1. 使用`ref`函数将非响应式数据转换为响应式数据：
```js
import { ref } from 'vue';
const nonReactiveData = 'non-reactive';
const reactiveData = ref(nonReactiveData);
vue中reactive
console.log(reactiveData.value); // 输出 'non-reactive'
```
2. 使用`reactive`函数将非响应式对象转换为响应式对象：
```js
import { reactive } from 'vue';
const nonReactiveObject = { name: 'non-reactive' };
const reactiveObject = reactive(nonReactiveObject);
console.log(reactiveObject.name); // 输出 'non-reactive'
```
无论是使用`ref`还是`reactive`函数，都可以在模板中直接使用响应式数据。
请注意，Vue 3还引入了`toRef`和`toRefs`函数，用于将响应式数据转换为普通的引用，以便在逻辑代码中使用，但仍保持对原始响应式对象的响应。这可以用于在逻辑代码中使用响应式数据，同时避免在计算属-+-性或方法中使用`.value`。
```js
import { toRef, toRefs } from 'vue';
const reactiveObject = reactive({ name: 'reactive' });
const reactiveRef = toRef(reactiveObject, 'name');
console.log(reactiveRef.value); // 输出 'reactive'
const reactiveRefs = toRefs(reactiveObject);
console.log(reactiveRefs); // 输出 { name: 'reactive' }
```