Vue学习计划-Vue3--核心语法（二）ref、reactive和toRefs、toRef

1. ref和reactive

1. ref创建：基本类型的响应式数据

• 作用：定义响应式变量
• 语法：let xxx = ref(初始值)
• 返回值：一个RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的
• 注意点：
  • JS中操作数据需要xxx.value,但模板中不需要.value,直接使用即可
  • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的
    

2. reactive定义对象类型的响应式数据

• 作用：只能定义对象类型
• 语法：let xxx = reactive({xxx})
• 返回值： 一个Proxy的实例对象，简称:响应式对象
• 注意点：reactive定义的响应式数据是“深层次”的
  

3. ref定义对象类型的响应式数据
   

我们打开浏览器看下控制台,主要看下两个输出，reactive定义对象类型的响应式数据和ref定义的数据的输出：

可以看出来：ref定义的响应式数据的value输出其实也是Proxy定义的对象，所以ref虽说可以定义基本类型和对象类型，但是定义对象类型还是依赖于reactive

4. ref对比reactive

• 宏观角度：

1. ref用来定义：基本类型数据、对象类型数据
2. reactive用来定义：对象类型数据

• 区别：

1. ref创建的变量必须使用.value(可以使用volar插件自动添加value,配置如下图：)
   
2. reactive重新分配一个新对象,会失去响应式（可以使用Object.assign去整体替换）

let obj = reactive({name: '小明'})
function changeObj(){
// obj = {name: '小红'} // 这么写页面不更新
// obj = reactive({name: '小红'}) // 这么写页面不更新
Object.assign(obj, {name: '小白'})
}

• 使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref
2. 若需要一个响应式对象，层级不深，ref、reactive都可以
3. 若需要一个响应式对象，且层级较深，推荐使用reactive，（form表单数据推荐使用reactive）

2. toRefs和toRef

• 作用：将一个响应式对象中的每一个属性，转换为ref对象
• 备注：toRefs与toRef功能一致，但toRefs可以批量转换

• 假若reactive定义的响应式对象属性过多，解构是比较好的选择，我们不需要person.xxx
  a. 但是单纯的结构，相当于let name = person.name; let age = person.age,所以解构出来的变量不是响应式的，
  b. 我们想要把解构的变量也变成响应式的，此时就需要用到toRefs和toRef,
  c. toRefs是将reactive定义的响应式对象内的每一项都转换为响应式数据，toRef是转换单个数据
  d. 注意，toRefs和roRef是将变量转换成ObjectRefImpl类型的数据，等同于ref定义的响应式数据，所以修改我们需要.value;我们在模板中就可以直接使用{{ name }}, {{ age }}

• 语法如下：