前言：在Vue3中我们创建的数据默认是普通的数据, 不是响应式的，所以我们需要手动包装数据，下面我将给各位老兄介绍下 reactive 函数和 ref 函数
一、reactive函数
-
作用: 传入一个复杂数据类型，将复杂类型数据, 转换成响应式数据 （返回该对象的响应式代理）
-
使用方法如下：
<script setup>
import { reactive } from 'vue'
// 1.默认是普通的值不是响应式的, 需要用 reactive 函数，将数据处理成响应式数据
const obj = reactive({
name: 'zs',
age: 18
})
console.log(obj);
</script>
打印
- 数据的使用：在模板和script中直接使用即可
- 总结： 通常是用来定义响应式 对象数据
二、ref 函数
- 作用: 对传入的数据（一般简单数据类型），包裹一层对象, 转换成响应式。
- ref 函数接收一个的值, 返回一个ref 响应式对象, 有唯一的属性 value
- 在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问到值
- 在模板中, ref 属性会自动解套, 不需要额外的 .value
- ref函数也支持传入复杂类型，传入复杂类型，也会做响应式处理
- 使用方法如下：
<script>
import { reactive, ref } from 'vue'
let money = ref(100)
console.log(money);//返回ref 响应式对象
console.log(money.value);//需要通过.value才可以拿到真正的值
</script>
打印
- 数据的使用：
- 在script中使用需要特别注意,一定要 .value 才可以获取到数据
2.在模板中正常使用即可
问题小结：
-
为什么script中不需要this？
答：因为在组合式api中，代码是写在setup函数里的，而setup里没有this
-
ref 和 reactive 的最佳使用方式？
答： 明确的对象，明确的属性，用 reactive，其他用 ref ， 如果你在纠结使用哪个，推荐选择 ref
-
ref 函数包裹简单类型后, 会包裹成对象, 在模板中需要 .value 么? 在 setup 中需要 .value 么?
答：在模板中不需要，在setup中需要
