1. ref和reactive

  1. ref创建：基本类型的响应式数据
  • 作用：定义响应式变量
  • 语法：let xxx = ref(初始值)
  • 返回值：一个RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的
  • 注意点：
    • JS中操作数据需要xxx.value,但模板中不需要.value,直接使用即可
    • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的 ref基本类型的响应式数据.png
  1. reactive定义对象类型的响应式数据
  • 作用：只能定义对象类型
  • 语法：let xxx = reactive({xxx})
  • 返回值： 一个Proxy的实例对象，简称:响应式对象
  • 注意点：reactive定义的响应式数据是“深层次”的 reactive定义对象类型的响应式数据.png
  1. ref定义对象类型的响应式数据 ref定义对象类型响应式数据.png

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

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

  1. ref对比reactive
  • 宏观角度：
  1. ref用来定义：基本类型数据、对象类型数据
  2. reactive用来定义：对象类型数据
  • 区别：
  1. ref创建的变量必须使用.value(可以使用volar插件自动添加value,配置如下图：) volar.png
  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 }}

  • 语法如下： toRefs和toRef.png