vue3较vue2的特别之处 - ref/toRef/toRef

ref:

为值类型数据添加响应式状态
示例：

const msg = ref('hello world');
// msg.value

reactive:

为对象添加响应式状态
示例：

const name = ref({
  firstName: 'zhonghua',
  lastName: 'zhong'
});

// name.firstName

toRef:

用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接
接收两个参数：源响应式对象和属性名，返回一个ref数据。
示例：

// props: { name: 'zzh', age: 18 }
const name = toRef(props, name);
// name.value

toRefs:

用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。
常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。
作用其实和 toRef 类似，只不过 toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值。

示例：

// props: { name: 'zzh', age: 18 }
const { name, age }= toRefs(props);
// name.value; age.value