0
点赞
收藏
分享

微信扫一扫

vue ref怎么实现基本数据类型和复杂数据类型响应式

小铺有酒一两不够 2024-07-24 阅读 28
vue.js

在Vue中,`ref`用于创建响应式的数据引用。对于基本数据类型(如字符串、数字等),`ref`可以直接实现响应式。而对于复杂数据类型(如对象或数组),需要使用`reactive`来创建响应式对象。

 

以下是如何使用`ref`和`reactive`来实现基本数据类型和复杂数据类型的响应式:

 

1. 对于基本数据类型:

 

```javascript

import { ref } from 'vue';

 

const count = ref(0); // 创建一个响应式的整数

count.value++; // 修改值时,视图会自动更新

```

 

2. 对于复杂数据类型(对象):

 

```javascript

import { reactive } from 'vue';

 

const state = reactive({

  count: 0,

  items: []

}); // 创建一个响应式的对象

 

state.count++; // 修改对象的值时,视图会自动更新

state.items.push('item'); // 修改数组的值时,视图也会自动更新

```

 

3. 对于复杂数据类型(数组):

 

```javascript

import { ref, reactive } from 'vue';

 

const numbers = ref([]); // 创建一个响应式的空数组

numbers.value.push(1); // 修改数组的值时,视图会自动更新

 

const state = reactive({

  items: []

}); // 创建一个响应式的对象

 

state.items.push('item'); // 修改数组的值时,视图也会自动更新

```

 

注意:当使用`reactive`创建响应式对象时,对象内部的属性仍然是非响应式的。如果需要使对象的属性也具有响应性,可以使用嵌套的`reactive`调用。

举报

相关推荐

0 条评论