@[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函数。
答案：如图问题：输出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 = '李四'
}
setup(){
let job = ref({
type:'前端工程师',
salary:'30K'
})
//方法
function changeInfo(){
job.value.type = 'UI设计师'
job.value.salary = '60K'
}
本人其他相关文章链接
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函数
