vue3 的响应式---Ref与Reactive区别以及toRefs和toRef的区别

1.ref是用来定义基本类型的数据（ 也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象）—是通过Object.defineProperty()的get()与set()来实现响应式(数据劫持)；ref操作数据需要.value，读取数据时模板中直接读取不需要.value

2.reactive用来定义对象（数组）类型的数据----通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

3.toRefs，toRef功能一样；都是将响应式对象中的某个属性单独提供给外部使用，并且这些属性都是响应式的；他们的区别时toRefs一次性全部将对象的属性变成ref对象，而toRef单个的

<template>
  <div>
     <p>ref:{{num}}</p> 
     <p>age:{{age}}</p> 
     <p>firstName:{{firstName}}</p>
     <p>lastName:{{lastName}}</p>
  </div>
</template>
<script>
import { ref,reactive,toRefs,toRef} from 'vue'
export default {
  setup() {
     const person = reactive({
      age:18,
      firstName: '张',
      lastName: '三'
    })
    const num=ref(5)
    // 当我们想返回一个对象里面的属性的时候，会丢掉响应式，所以我们可以通过toRef和toRefs来解决
    return {
      age: person.age
    };
    // 解决方法1（单个写法，数据时响应式的）
    return {
      age: toRef(person,'age'),
    };
    // 解决方法2（对象全部结构，而且还是响应式的）
    return {
      ...toRefs(person),
      num
    }
  }
}
</script>