上一部分中我们说到的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

欢迎访问小程序:

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐