Vue3中的reactive函数、toRef函数、toRefs函数、ref函数

1.reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <div>{{obj.msg}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'App',
  setup () {
    // 数据响应式：数据的变化导致视图自动变化
    // let msg = 'hello'
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    const handleClick = () => {
      // msg = 'nihao'
      // console.log(msg)
      obj.msg = 'nihao'
    }
    return { obj, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结：

1. setup默认返回的普通数据不是响应式的

2. 如果希望数据是响应式，有一种做法就是给数据包裹reactive方法即可

2.toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <!-- <div>{{obj.msg}}</div> -->
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue'

export default {
  name: 'App',
  setup () {
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    // 把对象中的单个属性取出并且保证数据的响应式
    const msg = toRef(obj, 'msg')
    const info = toRef(obj, 'info')
    const handleClick = () => {
      obj.msg = 'nihao'
      obj.info = 'coniqiwa'
    }
    // reactive中的对象属性如果重新赋值会失去响应式能力
    return { msg, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

3.toRefs是函数，转换响应式对象中所有属性（可以是一部分）为单独响应式数据，对象成为普通对象，并且值是关联的

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <!-- <div>{{obj.msg}}</div> -->
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'App',
  setup () {
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi',
      abc: 'abc'
    })
    // 把对象中的单个属性取出并且保证数据的响应式
    // const msg = toRef(obj, 'msg')
    // const info = toRef(obj, 'info')

    // 把obj对象中的属性结构出来，保证响应式能力
    const { msg, info } = toRefs(obj)
    const handleClick = () => {
      obj.msg = 'nihao'
      obj.info = 'aligotogozayimasi'
    }
    // reactive中的对象属性如果重新赋值会失去响应式能力
    return { msg, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

4.ref函数，常用于简单数据类型定义为响应式数据

• 在修改值和获取值的时候，需要.value

• 在模板中使用ref申明的响应式数据，可以省略.value

  <template>
    <div>
      <div>数据的响应式</div>
      <hr>
      <div>{{count}}</div>
      <div>
        <button @click='handleClick'>点击</button>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue'
  
  export default {
    name: 'App',
    setup () {
      // ref主要（也可以是对象和数组）用于定义基本类型的数据并保证响应式能力
      const count = ref(0)
      const obj = ref({ msg: 'hello' })
      const handleClick = () => {
        // ref定义的数据，在js中操作时需要通过value属性进行
        // 但是模板中访问不需要value
        count.value += 1
        console.log(obj.value.msg)
      }
      return { count, handleClick }
    }
  }
  </script>
  
  <style lang="less">
  </style>