Vue3实现数据响应式

在vue3中setup默认返回的普通数据不是响应的，如果希望数据是响应式的，有4种方式，今天我就来和大家介绍一下这4种方式

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

代码演示：

<template>
  <div>数据响应式</div>
  <div>
    {{ obj.msg }}
  </div>
  <div>
    <button @click="hClick">点击</button>
  </div>
</template>
 
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    //  数据响应式：
    const obj = reactive({
      msg: 'hello'
    })
    const hClick = () => {
      obj.msg = 'nihao'
    }
    return { obj, hClick }
  }
}
</script>
 
<style lang="less"></style>

运行结果：

点击按钮以后

（2）toRef():当我们在模板中渲染数据时，不希望有前缀的时候可以使用组合-toRef()

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

代码演示：

<template>
  <div>数据响应式</div>
  <div>
    {{ msg }}
  </div>
  <div>
    {{ info }}
  </div>
  <div>
    <button @click="hClick">点击</button>
  </div>
</template>
 
<script>
import { reactive, toRef } from 'vue'
export default {
  name: 'App',
  setup() {
    //  数据响应式：
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    const msg = toRef(obj, 'msg')
    const info = toRef(obj, 'info')
    const hClick = () => {
      msg.value = 'nihao'
      info.value= 'hihi'
    }
    return { msg, info, hClick }
  }
}
</script>
 
<style lang="less"></style>

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

具体代码表示：

<template>
  <div>数据响应式</div>
  <div>
    {{ msg }}
  </div>
  <div>
    {{ info }}
  </div>
  <div>
    <button @click="hClick">点击</button>
  </div>
</template>
 
<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'App',
  setup() {
    //  数据响应式：
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    const { msg, info } = toRefs(obj)
    const hClick = () => {
    	msg.value = 'nihao'
    	info.vaule = 'hihi'
    }
    return { msg, info, hClick }
  }
}
</script>
 
<style lang="less"></style>

（4）ref函数定义响应式数据，一般用于简单类型数据

使用ref()函数时，通常要注意两点：

（1）在修改值和获取值的时候，需要.value

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

具体代码表示：

<template>
  <div>数据响应式</div>
  <div>
    {{ count }}
  </div>
 
  <div>
    <button @click="hClick">点击</button>
  </div>
</template>
 
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    //  数据响应式：
    const count = ref(0)
    const obj = ref({ msg: 'hello' })
    const hClick = () => {
      count.value += 1
      console.log(obj.value.msg)
    }
 
    return { count, hClick }
  }
}
</script>
 
<style lang="less"></style>

ref主要是用于定义基本数据类型的数据并保证响应式能力，也可以用于对象或数据