vue3定义响应式数据(ref,reactive,toRef,t

1. ref 定义普通数据类型的响应式，获取/修改数据需要.value，在模板中不需要.value可以直接使用

//引入ref
import {ref} from "vue";

export default {
  setup(){
    let num = ref(0)
    console.log(num.value)
    return {num}
  }
}

2. reactive定义复杂数据类型的响应式，

//引入reactive
import {reactive} from "vue";

export default {
  setup(){
    let arr= reactive({
      name:'tyy',
      age:24,
      heigh:165
    })
    return {arr}
  }
}

3. toRef():当我们在模板中渲染数据时，不希望用前缀的时候可以使用组合toRef()--- toRef()是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的

<template>
  <div>
      <div>姓名：{{name}}</div>
      <div>年龄：{{age}}</div>
      <button @click="btnArr">按钮</button>
  </div>
</template>
<script>
//引入toRef
import {toRef} from "vue";

export default {
  setup(){
     let arr = reactive({
      name:'tyy',
      age:24
    })

    let name = toRef(arr,'name')
    let age = toRef(arr,'age')

    let btnArr = () => {
      arr.name = "唐园园"
      arr.age = 23
    }
    return {name,age,btnArr}
  }
}
</script>

4. toRefs()---toRefs函数可定义转换响应式中所有属性为响应式数据，通常用于结构reactive定义的对象，转换响应式对象中所有属性（部分也行）为单独响应式数据，对象成为普通对象，并且值是关联的

<template>
  <div>
      <div>姓名：{{name}}</div>
      <div>年龄：{{age}}</div>
      <button @click="btnArr">按钮</button>
  </div>
</template>
<script>
//引入toRef
import {toRefs} from "vue";

export default {
  setup(){
     let arr = reactive({
      name:'tyy',
      age:24
    })
    //转换
    let {name,age} = toRefs(arr)
    let btnArr = () => {
      arr.name = "唐园园"
      arr.age = 23
    }
    return {name,age,btnArr}
  }
}
</script>