前端开发实战（第三讲）（响应式数据绑定）

1.ref()函数

   ref()函数用于将数据转换成响应式数据，其参数为数据，返回值为转换后的响应式数据，使用ref()函数定义响应式数据的语法格式如下：

         响应式数据=ref(数据)

如果需要更改响应式数据的值，可以

    响应式数据.value=新值

代码实现

<template>
	{{ msg }}
</template>

<script setup>
	import { ref } from 'vue'
	const msg=ref('我是未改变之前')
	setTimeout( () => {
		msg.value='我是改变之后'
	},2000)
</script>

<style>
</style>

等待2秒之后

2.reactive()函数

  reactive()函数用于创建一个响应式对象或数组，将普通的对象或数组作为参数传给函数。

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

代码如下

<template>
	{{ obj.msg }}
</template>

<script setup>
	import { reactive } from 'vue'
	const obj = reactive({msg:'我是修改之前'})
	setTimeout( ()=> {
		obj.msg='我是修改之后'
	},2000)
</script>

<style>
</style>

展示如上

3.toRef()函数

toRef()函数用于将响应式对象种的单个数学转换成响应式数据

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

代码如下

<template>
	<div>msg的值:{{msg}}</div>
	<div>obj.msg的值:{{obj.msg}}</div>
</template>

<script setup>
	import {reactive,toRef} from 'vue'
	const obj = reactive({msg:'我是修改之前'})
	const msg=toRef(obj,'msg')
	setTimeout( ()=> {
		msg.value='我是修改之后'
	},2000)
</script>

<style>
</style>

展示

2秒之后

4.toRefs()函数

toRefs()函数用于将响应式对象种的所有属性转换成响应式数据

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

代码如下

<template>
	<div>msg的值:{{ msg }}</div>
	<div>obj.msg的值:{{ obj.msg}}</div>
</template>

<script setup>
	import { reactive, toRefs } from 'vue'
	const obj=reactive({ msg:'我是修改之前' })
	let { msg } =toRefs(obj)
	setTimeout( ()=> {
		msg.value='我是修改之后'
	},2000)
</script>

<style>
</style>

效果如上

5，客串

<template>
	{{ msg }}
	<br>
	a:{{ a }}
	<br>
	b:{{ b }}
	<br>
	c:{{ c }}
</template>

<script setup>
	import {ref,toRefs} from 'vue'
	let msg=ref(0)
	const obj={a:1,b:2}
	let{c,b}=toRefs(obj)
	const plus=()=>{
		msg.value+=1
		console.log(msg)
	}
</script>

<style>
</style>

展示