Vue3的toRef和toRefs

最新推荐文章于 2024-06-15 14:41:39 发布

百香果果ccc

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量329

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wytccc/article/details/131661368

版权

Vue 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

toRef函数是创建一个引用实现对象（ObjectRefImpl），并将它指向另一个对象中的某个属性

<template>
	<p>{{name}}</p>
	<p>{{city}}</p>
	<button @click="name + '~'">更改姓名</button> <!-- 更改name实际上更改了person.name -->
	<button @click="city + '~'">更改城市</button>
</template>

<script>
import { reactive, toRef } from 'vue'; 
export default {
	setup() {
		let person = reactive({
			name: 'wu',
			job: {
				city: 'tj'
			}
		});
		return {
			name: toRef(person, name),
			city: toRef(person.job, city)
		};
	}
}
</script>

toRefs是批量操作

<template>
	<p>{{name}}</p>
	<p>{{job.city}}</p>
	<button @click="name + '~'">更改姓名</button> <!-- 更改name实际上更改了person.name -->
	<button @click="job.city + '~'">更改城市</button>
</template>

<script>
import { reactive, toRefs } from 'vue'; 
export default {
	setup() {
		let person = reactive({
			name: 'wu',
			job: {
				city: 'tj'
			}
		});
		return {
			...toRefs(person)
		};
	}
}
</script>