Vue3-day3-Ref-Reactive

Ref：创建基本类型的响应式数据

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

reactive:创建对象类型的响应式数据

• 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
• 语法：let 响应式对象= reactive(源对象)。
• 返回值：一个Proxy的实例对象，简称：响应式对象。
• 注意点：reactive定义的响应式数据是“深层次”的。
• 代码段

ref创建对象类型的响应式数据

• 其实ref接收的数据可以是：基本类型、对象类型。
• 若ref接收的是对象类型，内部其实也是调用了reactive函数。
• 注意点：
  • 操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
  • 对于let car = ref({brand: '奔驰', price: 100}) 来说，car 不是响应式的，car .value是响应式的。
• 代码段

ref 与 reactive 对比

• 宏观：
  • ref用来定义：基本类型数据、对象类型数据；
  • reactive用来定义：对象类型数据。
• 区别：
  • ref创建的变量必须使用.value；
  • reactive重新分配一个新对象，会失去响应式（可以使用Object.assign）去整体替换；

    function changeCar() {
     // car = {brand: '宝马', price: 120}  //不生效
     Object.assign(car,{brand: '宝马', price: 120})  //生效
    }
    

• 使用规则：
  • 若需要一个基本类型的响应式数据，必须使用ref；
  • 若需要一个响应式对象，层次不深，ref、reactive都可以；
  • 若需要一个响应式对象，且层次较深，建议使用reactive；

toRef 与 toRefs

• 作用：将一个响应式对象中的每一个属性，转换为ref对象；
• 备注：toRefs与toRef功能一致，但toRefs可以批量转换；
• toRefs是把整个reactive所定义的对象的每一组key-value都拿出来形成一个新的对象并且还具备响应式的能力；
• 代码段：