一、总述

ref函数和reactive函数都是用来定义响应式数据

二、ref:

1、函数参数可以是基本数据类型，也可以接受对象/数组（复杂数据类型）；

2、在template中访问，系统会自动添加.value；在js中需要手动.value

3、返回值为 ref 对象

4、ref响应式原理是依赖于Object.defineProperty()的get()和set()的

const count = 10;
const reactiveInfo = ref(count);

console.log(reactiveInfo);

// 输出：
// RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: 10, _value: 10}

三、reactive

1、函数参数必须是对象或者数组（复杂数据类型），不能传入基本类型的值；

2、在 template 和 js 中访问，都不需要添加 .value

3、返回值为 Proxy 对象

4、在 侦听器 watch 中自带深度监听 deep:true

const info = { name: '张三', age: 18, };
const reactiveInfo = reactive(info);

// 输出 reactive 处理后的对象
console.log(reactiveInfo);

// 控制台实际输出（可以明显的看到其属于一个 Proxy 对象）
// 输出：Proxy {name: '张三', age: 18}