VUE3（九）reactive与toRefs函数

上一部分中我们说到的ref只是作为单个变量的响应。

Vue3.0中还为我们提供了一个对象式响应的reactive函数 。

Reactive函数创建一个响应式对象。

一：Reactive函数

其实，在我看来，reactive函数 就是VUE3.0为我们提供的替代VUE2.0中data的一个函数，因此，在这里，我不建议将方法也写到reactive函数中。

reactive函数 中只写数据即可。

1：引入

import {
    ref,
    reactive,
} from "vue";

2：实例

我这里使用上一部分中我们测试使用的代码来做示例，刚好对比一下ref与reactive在写法上边的区别。

Helloworld.vue

<template>
  <h1>{{ msg }}</h1>
  <!-- <button @click="count++">count is: {{ count }}</button> -->
  <!-- 模板语法需要使用data.属性来调用 -->
  <button @click="count++">count is: {{ data.count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">点我弹窗</button>
</template>
 
<script lang='ts'>
import {
    ref,
    reactive
} from "vue";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 使用setup 代替 data
  // 因为我这里使用的是typescript，因此需要给参数指定类型
  setup(props:any,context:any){
    // ref 定义响应式数据
    // let count = ref(0); 
 
    // reactive 创建响应式对象
    let data = reactive({
      // 定义响应式数据
      count:0,
    });
    
    const clickMe = () => {
      // 使用ref关键字绑定的变量，赋值 的时候必须使用.value
      // count.value++;
      // 调用reactive 定义对象的参数的时候需要使用对象.来调用
      data.count++;
      alert('hi');
    }
    return {
      data,
      clickMe
    }
  },
}
</script>

3：主要有这几个区别：

1：在js中调用需要使用data.属性来赋值使用。

2：在VUE模板语法中，也需要使用data.属性来赋值使用。

二：toRefs函数

模板语法中需要使用data.属性来调用属性显示，相对来说就比较麻烦。

其实我们可以使用ES6中的扩展运算符来对其进行解构处理，但是，这样吧解构之后，便不再具有响应式的属性，这个不行。

VUE3.0为我们提供了toRefs函数可以解决这个问题。

1：引入

import {
    ref,
    reactive,
    toRefs
} from "vue";

2：示例

Helloworld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <!-- 模板语法需要使用data.属性来调用（单独使用reactive函数） -->
  <!-- <button @click="count++">count is: {{ data.count }}</button> -->
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <button @click="clickMe()">点我弹窗</button>
</template>
 
<script lang='ts'>
import {
    ref,
    reactive,
    toRefs
} from "vue";
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // 使用setup 代替 data
  // 因为我这里使用的是typescript，因此需要给参数指定类型
  setup(props:any,context:any){
    // ref 定义响应式数据
    // let count = ref(0); 
 
    // reactive 创建响应式对象
    let data = reactive({
      // 定义响应式数据
      count:0,
    });
    
    const clickMe = () => {
      // 使用ref关键字绑定的变量，赋值 的时候必须使用.value
      // count.value++;
      // 调用reactive 定义对象的参数的时候需要使用对象.来调用
      data.count++;
      alert('hi');
    }
 
    // 使用toRefs函数对data对象进行包装，确保使用扩展运算符进行解构之后，仍具有响应式
    let param = toRefs(data);
    return {
      // data,
      ...param,
      clickMe
    }
  },
}
</script>

完整的代码已经给出，具体的使用，你可能还需要自己试一下。

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序：