vue3知识点：ref函数

原创

刘大猫

发布于 2024-10-31 16:16:00

2230

文章被收录于专栏：Vue3Vue3

@toc

二、常用 Composition API

问题：啥叫“组合式API”？

答案：请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

2.ref函数

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据： xxx.value
- 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
- 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

注意点1：

问题：输出ref函数长啥样？

答案：如图

注意点2：

以后管vue3中ref叫“引用对象”

注意点3：

响应式依然是靠“Object.defineProperty()”的get与set完成的，且ref中吧get和set放在了响应式原型属性中（而vue2中是直接放在实例对象上的），这样看起来更清爽，更干净，如图

注意点4：

总结：ref处理基础数据类型使用get 和set，ref处理引用类型使用ES6的Proxy代理对象进行获取，整体思路图如图1

举例比如：使用ref设置与修改“基础数据类型数据”，使用name.value设置新值，打印name输出结果如图2

setup(){
	//数据
	let name = ref('张三')
	//方法
	function changeInfo(){
		name.value = '李四'				
}

使用ref设置与修改“引用数据类型数据”，使用job.value.type而不是job.value.type.value设置新值，打印job.value输出结果如图3

setup(){			
	let job = ref({
		type:'前端工程师',
		salary:'30K'
	})

	//方法
	function changeInfo(){				
		job.value.type = 'UI设计师'
		job.value.salary = '60K'
}