toRef与toRefs

0yizhiyang

已于 2023-03-13 20:35:02 修改

阅读量64

点赞数

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

于 2023-03-10 02:23:53 首次发布

本文链接：https://blog.csdn.net/m0_58190023/article/details/129434590

版权

Vue3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了Vue中toRef和toRefs函数的用途，它们用于将响应式对象的属性转换为独立的ref对象，以实现对外部的单独引用和更新。示例展示了如何在模板和脚本中使用这些函数来绑定和修改数据，包括对深层属性的处理。

摘要由CSDN通过智能技术生成

一、概念

作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

语法：const name = toRef(person,'name')

应用: 要将响应式对象中的某个属性单独提供给外部使用时。

扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

二、使用

<template>
	<h4>{{ person }}</h4>
	<h2>姓名：{{ name }}</h2>
	<h2>年龄：{{ age }}</h2>
	<h2>薪资：{{ job.j1.salary }}K</h2>
	<button @click="name += '~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
	name: 'Demo',
	setup() {
		let person = reactive({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		})

		const name1 = person.name    //没有响应性
		console.log(name1)

		const name2 = toRef(person,'name')
		console.log('toRef',name2)

		const x = toRefs(person)
		console.log('toRefs', x)

		//返回一个对象（常用）
		return {
			person,
			// name:toRef(person,'name'),
			// age:toRef(person,'age'),
			// salary:toRef(person.job.j1,'salary'),
			...toRefs(person)
		}
	}
}
</script>