响应式ref()和reactive()

ref()

• 作用：定义响应式变量。

• 语法：let xxx=ref(初始值)。

• 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的

• 注意点：

  1. JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
  2. 对于let name =ref(‘张三’)来说，name不是响应式的，name.value是响应式的

reactive()

• 作用：定义响应式对象（基本类型不要用它，要用ref，否则报错）。

• 语法：let 响应式对象=reactive(源对象)。

• 返回值：一个Proxy的实例对象，简称响应式对象。

• 注意点：reactive定义的响应式数据是“深层次”的。

ref对比reactive

• 宏观角度看:
  1. ref用来定义：基本类型数据、对象类型数据;
  2. reactive用来定义：对象类型数据。
• 区别:
  1. ref 创建的变量必须使用，value（可以使用volar插件自动添加，value）。
  2. reactive 重新分配一个新对象，会失去响应式（可以使用0bject.assign去整体替换）。
• 使用原则:
  1. 若需要一个基本类型的响应式数据，必须使用ref。
  2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
  3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

toRefs与toRef

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

import {reactive,toRefs,toRef} from
// 数据
let person = reactive({name:'张三age:18
})
let {name,age} = toRefs(person)
let nl = toRef(person,'age')