vue3.0---使用ref，reactive, toRefs

什么是ref?
ref和reactive一样，也是用来实现响应式数据的方法，由于reactive必须传递一个对象，所以导致在企业的开发中如果我们只想让某个变量实现响应式的时候会非常麻烦，所以vue3.0给我们提供了ref方法，实现对简单值的监听。
ref的本质 ：
ref底层的本质还是reactive
系统会自动根据我们给ref传入的值将它转换成
ref(xx) => reactive(value:xx)
ref注意点：
在vue3.0中使用ref的值不用通过value猎取。
在JS中使用ref的值必须通过value获取

ref和reactive区别：
如果在template里使用的是ref类型数据，那么vue会自动帮我们添加.value
如果在template里使用reactive类型数据，那么vue不会自动 帮我们添加。value
vue是如何决定是否需要自动添加.value的。
vue在解析数据之前，会自动判断这个数据是否是ref类型的。
如果是就自己动添加.value，如果不是就不自动添加。
vue是如何判断当前的数据是否是ref类型的
通过当前数据的__v_ref来判断。
如果有这个私有属性，并且取值为true，那么就代表是一个Ref类型的数据。
vue通过源代码判断，使用者如何 判断？
import {isRef, isReactive}from vue
console.log(isRef(**))
console.log(isReactive(*))

ref 单个定义

<template>
<div>{{num}}</div>
<div>{{name}}</div>
<div>{{arr[0]}}</div>
<div>{{obj}}</div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "home",
  setup(props, ctx) {
    let num = ref(10)
    let name = ref('zhihui')
    let arr = ref(['a','b','d'])
    let obj = ref({name:'zzz'})
    return {
      num,
      name,
      arr,
      obj
    }
  },
});
</script>
<style scoped lang="scss">
</style>

reactive 定义对象

<template>
<div>{{data.age}}</div>
<div>{{data.name}}</div>
<div>{{data.arr[0]}}</div>
<div>{{data.obj}}</div>
</template>
<script>

import { defineComponent, ref , reactive} from "vue";
export default defineComponent({
  name: "home",

  setup(props, ctx) {
    let data = reactive({
      name:'zhihii',
      age:'20',
      obj:{
        price:'20'
      },
      arr:['a,','b','d']
    })
    return {
      data
    }
  },
});
</script>
<style scoped lang="scss">
</style>

toRefs将对象拆开解构成单个字段返回
作用：创建一个ref对象，其value值指向另一个对象中的某个属性。
语法 ：const name = toRef(person, ‘name’)
应用： 要将响应式对象中的某个属性单独提供给外部使用时。
扩展： toRefs 与toRef功能一致，但可以指创建多个ref对象，语法toRef(person)

<template>
<div>{{age}}</div>
<div>{{name}}</div>
<div>{{arr[0]}}</div>
<div>{{obj}}</div>
</template>
<script>
import { defineComponent, ref , reactive, toRefs} from "vue";
export default defineComponent({
  name: "home",
  setup(props, ctx) {
    let data = reactive({
      name:'zhihiiwang',
      age:'20',
      obj:{
        price:'20'
      },
      arr:['a,','b','d']
    })
    return {
      // data
      ...toRefs(data)
    }
  },
});
</script>
<style scoped lang="scss">
</style>