Vue 响应式数据绑定

目录

1.ref()函数，用于将数据转换成响应式数据

2.reactive()函数，用于创建一个响应式对象或数组

3.toRef()函数,用于将响应式对象中的单个属性转换为响应式数据

4.toRefs()函数，用于将响应式对象中的所有属性转为响应式数据

---

如果想要实现页面中数据的更新，则需要进行响应式数据绑定，也就是将数据定义成响应式数据。Vue为开发者提供ref()函数、reactive()函数、toRef()函数和toRefs()函数用于定义响应式数据，下面分别进行讲解：

1.ref()函数，用于将数据转换成响应式数据

使用ref()函数定义响应式数据的语法格式如下：

响应式数据 = ref(数据)

如果需要更改响应式数据的值，可以使用以下语法格式进行修改：

响应式数据.value = 新值

下面通过一个demo进行演示ref()函数的使用：

<script setup>
import {ref} from 'vue';
const message = ref('会当凌绝顶，一览众山小')
setTimeout(() => {
  message.value='锲而不舍，金石可镂'
}, 2000);
</script>

<template>
{{message}}
</template>

<style scoped></style>

2.reactive()函数，用于创建一个响应式对象或数组

使用reactive()函数定义响应式数据的语法格式如下：

响应式对象或数组 = reactive(普通的对象或数组)

下面通过一个demo进行演示reactive()函数的使用：

<script setup>
import {reactive,toRefs} from 'vue';
const obj = reactive({message:'白日依山尽，黄河入海流'})

setTimeout(() => {
  obj.message='欲穷千里目，更上一层楼'
}, 2000);
</script>

<template>
<div>obj.message的值：{{obj.message}}</div>
</template>

<style scoped></style>

3.toRef()函数,用于将响应式对象中的单个属性转换为响应式数据

使用toRef()函数定义响应式数据的语法格式如下：

响应式数据 = toRef(响应式对象，'属性名')

下面通过一个demo进行演示toRef()函数的使用：

<script setup>
import {reactive,toRef} from 'vue';
const obj = reactive({message:'黑发不知白发早，白首房屋悔读书时'})
const message = toRef(obj,'message')

setTimeout(() => {
  message.value='少壮不努力，老大徒伤悲'
}, 2000);
</script>

<template>
<div>message的值：{{message}}</div>
<div>obj.message的值：{{obj.message}}</div>
</template>

<style scoped></style>

4.toRefs()函数，用于将响应式对象中的所有属性转为响应式数据

使用toRefs()函数定义响应式数据的语法格式如下：

所有属性组成的对象 = toRefs(响应式对象)

下面通过一个demo进行演示toRefs()函数的使用：

<script setup>
import {reactive,toRefs} from 'vue';
const obj = reactive({message:'盛年不重来，一日难再晨'})
let {message} = toRefs(obj)

setTimeout(() => {
  message.value='及时当勉励，岁月不待人'
}, 2000);
</script>

<template>
<div>message的值：{{message}}</div>
<div>obj.message的值：{{obj.message}}</div>
</template>

<style scoped></style>