vue3 ref wrapRef
时间: 2023-09-04 21:13:39 浏览: 115
`ref`和`wrapRef`都是Vue 3中的响应式工具。
- `ref`:用于将普通的数据转换为响应式数据。它接收一个初始值作为参数,返回一个包装后的响应式对象。例如:
```javascript
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 输出初始值0
count.value++; // 对值进行修改
console.log(count.value); // 输出修改后的值
```
在上面的例子中,我们使用`ref`将初始值`0`转换为一个响应式对象`count`。我们可以通过访问`count.value`来获取和修改其值。
- `wrapRef`:用于将普通的JavaScript对象转换为响应式数据。它接收一个普通对象作为参数,返回一个包装后的响应式对象。例如:
```javascript
import { wrapRef } from 'vue';
const user = wrapRef({ name: 'John', age: 25 });
console.log(user.value.name); // 输出'name'属性的值
user.value.age++; // 修改'age'属性的值
console.log(user.value.age); // 输出修改后的值
```
在上面的例子中,我们使用`wrapRef`将普通对象`{ name: 'John', age: 25 }`转换为一个响应式对象`user`。我们可以通过访问`user.value.name`和`user.value.age`来获取和修改其属性的值。
需要注意的是,在Vue 3中,我们不再需要使用`$refs`来访问DOM元素,而是可以直接操作响应式对象的值。