vue3知识点：ref函数_const books=ref什么意思

二、常用 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 = '李四'				
}
1
2
3
4
5
6
7

使用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'
}
1
2
3
4
5
6
7
8
9
10
11

本人其他相关文章链接

1.《vue3第二章》常用组合式 Composition API，包括setup、ref函数、reactive函数、vue3.0中的响应式原理、计算属性与监听属性
2.vue3知识点：setup
3.vue3知识点：ref函数
4.vue3知识点：reactive函数
5.vue3知识点：Vue3.0中的响应式原理和 vue2.x的响应式
6.vue3知识点：reactive对比ref
7.vue3知识点：计算属性与监视属性
8.vue3知识点：生命周期
9.vue3知识点：自定义hook函数
10.vue3知识点：toRef函数和toRefs函数