vue3的ref,computed,reactive和toRefs你都了解吗

目录
  • 1、ref
  • 2、computed
  • 3、reactive
  • 4、toRefs
  • 总结

在vue2中，data函数里返回的值直接为响应式的，但在vue3中我们需要使用一些函数才能达到这个效果。

setup函数中拿不到vue的this

1、ref

本质为一个函数，输入参数为一个值（原始类型），返回响应式的对象

2、computed

本质为一个函数，输入参数是一个函数，可以将我们需要的值作为输入函数的返回值

例子：实现点击按钮，屏幕上的数加1

<template>
  <div id='app'>
    <img alt="vue logo" src="./assets/logo.png">
    <!-- ref对象在模板中引用时，vue可以直接把内部的值展示出来，不需要写count.value -->
    <h1>{{count}}</h1>
    <h1>{{double}}</h1>
    <button @click='increase'>点击</button>
  </div>
</template>
<script lang='ts'>
//ref API:是一个函数，输入参数为一个值，返回一个响应式对象
//computed API：是一个函数，输入参数为函数类型，该输入函数中包含咱们需要的值
//reactive:将响应式变量包裹在一起，更加清晰
import {computed, ref,reactive} from 'vue'
export default({
  name: 'App',
  /*data(){
    return{
      count: 0
    }
  },
  methods:{
    increase(){
      this.count++
    }
  }*/
  // 注意：在vue3中不使用data和methods，可以使用ref函数，完成响应式
  setup(){
    const count = ref(0)    //将0传入，返回一个对象
    const double = computed(()=>{
      return count.value*2
    })
    const increase = ()=>{
      count.value++         //通过返回对象的value属性获得响应式的数据
    }
    return{                 //要在外面使用的变量都要先通过return导出，才能使用
      count,
      increase,
      double
    }
  }
});
</script>

3、reactive

本质为一个函数，接受一个object作为传入参数

上述代码在setup函数中，有很多响应式数据，它们都是分散的，我们可以使用reactive将它们都包裹起来。输出对象类型，模板中需要用data.属性取出来。

<template>
  <div id='app'>
    <img alt="vue logo" src="./assets/logo.png">
    <h1>{{data.count}}</h1>
    <h1>{{data.double}}</h1>
    <button @click='data.increase'>点击</button>
  </div>
</template>
<script lang='ts'>
import {computed, ref,reactive} from 'vue'
export default({
  name: 'App',
  // 注意：在vue3中不使用data和methods，可以使用ref函数，完成响应式
  setup(){
    const data = reactive({
      count:0,
      increase:()=>{
        data.count++
      },
      double:computed(()=>
        data.count*2
      )
    })
    return{                 //要在外面使用的变量都要先通过return导出，才能使用
      data
    }
  }
});
</script>

上述代码在运行时会报错，data数据类型会出错，这是因为内部的computed函数造成的data类型推论循环，需要解决。可以手动设置一个数据类型赋给data。

interface dataProps{
  count:number,
  double:number,
  increase:()=>void
}

继续修改上述代码，发现模板中每次使用数据都需要data.属性才能取出来，能不能直接用属性？这时我们想到了es6的...展开符，但是更改后发现点击按钮，屏幕上的数字不发生变化了，数据不是响应式的了。

这是因为这种方式返回的数据都是普通的js数据类型，并不是响应式的ref数据类型，因此我们需要新的方法。

4、toRefs

本质为一个函数，接受一个reactive函数作为输入参数，返回一个ref类型的对象。

<template>
  <div id='app'>
    <img alt="vue logo" src="./assets/logo.png">
    <!-- ref对象在模板中引用时，vue可以直接把内部的值展示出来，不需要写count.value -->
    <h1>{{count}}</h1>
    <h1>{{double}}</h1>
    <button @click='increase'>点击</button>
  </div>
</template>
const refData = toRefs(data)
return{                 //要在外面使用的变量都要先通过return导出，才能使用
  ...refData
}

这时，我们展开refData，就能实现响应式了。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • setup+ref+reactive实现vue3响应式功能

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应.接下来就看看setup如何实现data的响应式功能? 一.ref setup 内的自定义属性不具备响应式能力,所以引入了 ref ,ref 底层通过代理,把属性包装值包装成一个 proxy ,proxy 内部是一个对象,使得基础类型的数据具备响应式能力,使用之

  • Vue 计算属性 computed

    目录 1.基础例子 2.计算属性缓存 vs 方法 3.计算属性的 setter 前言: 一般情况下属性都是放到data中的,但是有些属性可能是需要经过一些逻辑计算后才能得出来,那么我们可以把这类属性变成计算属性. 比如以下: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message

  • Vue中ref的用法及演示

    Vue中ref的用法及演示

    目录 ref 定义:被用来给元素或子组件注册引用信息.引用信息会被注册在父组件上的$refs对象上. 如果是在普通的dom元素上使用,引用指向的就是dom元素: 如果用在子组件上,引用指向的就是组件实例. 举例: 组件1: <template> <div> 我是{ {name}} </div> </template> <script> export default { name:'Cpn1', data() { return { name:'组件

  • Vue3如何理解ref toRef和toRefs的区别

    目录 一.基础 1.ref 2.toRef 3.toRefs 4.最佳的使用方式 二.深入 1.为什么需要ref 2.ref为什么需要.value 3.为什么需要toRef和toRefs Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是ref toRef和toRefs?三者在使用方式上有什么不同?最佳的使用方式是什么? 一.基础 1.ref (1) 生成值类型的响应式数据, 通过 .value修改值 <template>

  • Vue中的computed属性详解

    Vue中的computed属性详解

    目录 插值表达式 methods computed 总结 今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容随着输入框中的内容变化而变化 插值表达式 我们先用插值表达式的方法来实现这一效果 <body> <div id="app"> 姓: <input type="text&

  • vue3的ref,computed,reactive和toRefs你都了解吗

    目录 1.ref 2.computed 3.reactive 4.toRefs 总结 在vue2中,data函数里返回的值直接为响应式的,但在vue3中我们需要使用一些函数才能达到这个效果. setup函数中拿不到vue的this 1.ref 本质为一个函数,输入参数为一个值(原始类型),返回响应式的对象 2.computed 本质为一个函数,输入参数是一个函数,可以将我们需要的值作为输入函数的返回值 例子:实现点击按钮,屏幕上的数加1 <template> <div id='app'&

  • vue3如何定义变量及ref、reactive、toRefs特性说明

    目录 vue3定义变量及ref.reactive.toRefs特性 1.ref() 函数 2.reactive() 函数 3.toRefs() 函数 vue3定义变量 1.const 声明变量 2.reactive和ref 3.provide与inject vue3定义变量及ref.reactive.toRefs特性 1.ref() 函数 ref() 函数用来根据给定的值创建一个响应式的数据对象,传入的为基本数据类型,例如字符串.数字.boolean 等,返回值是一个对象,这个对象上只包含一个

  • 浅谈vue3中ref、toRef、toRefs 和 reactive的区别

    目录 一.ref——定义任意类型响应式数据 二.reactive——定义响应式对象 三.toRef——将一个 reactive 转化为一个 ref 四.toRefs——将多个 reactive 自动解构为多个 ref 一.ref——定义任意类型响应式数据 ref 能定义“任何类型”的响应式数据(ref 在 vue3 中指响应式数据). 参数可以传入任意数据类型. 使用 ref 定义的属性必须通过 .value 的形式才能修改其值.属性的值一旦被修改就会触发模板的重新渲染以显示最新的值. 对于在

  • Vue3中ref和reactive的基本使用及区别详析

    目录 前言 ref—计数器案例 reactive—计数器案例 区别 类似使用ref 类似使用 reactive 附:ref和reative的使用心得 总结 前言 今天给大家讲一下在vue3中ref和reactive的使用方法,以及他们的使用区别在哪里,下面通过一个简单的计数器的例子来给大家进行说明 ref—计数器案例 ref 主要用于基本类型的响应,看如下代码: import { ref } from 'vue' // 导入ref interface DataProps { count: num

  • Vue3中ref与reactive的详解与扩展

    Vue3中ref与reactive的详解与扩展

    一.ref和reactive 死死记住:ref本质也是reactive,ref(obj)等价于reactive({value: obj}) vue3中实现响应式数据的方法是就是使用ref和reactive,所谓响应式就是界面和数据同步,能实现实时更新 vue2中响应式是通过defineProperty实现的,vue3中是通过ES6的Proxy来实现的 1.reactive reactive的参数必须是一个对象,包括json数据和数组都可以,否则不具有响应式 如果给reactive传递了其他对象(

  • vue3 中ref和reactive的区别讲解

    1. ref和reactive区别:    如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value    如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value 2. Vue是如何决定是否需要自动添加.value的    Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,    如果是就自动添加.value, 如果不是就不自动添加.value 3. Vue是如何判断当前的数据是否是ref类型的   

  • 详解Vue3中ref和reactive函数的使用

    目录 前言 ref 函数介绍 ref 函数使用 ref 函数处理基本数据类型 ref 函数处理复杂数据类型 ref 函数获取单个DOM元素 其他相关方法 reactive 函数介绍 reactive 函数使用 ref 函数处理对象 ref 函数处理数组 前言 上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并且控制台报错,那这篇博客就是讲解遇到的这个问题应该如何处理. ref 函数介绍 ref 作用

  • Vue3.0中Ref与Reactive的区别示例详析

    目录 Ref与Reactive Ref Reactive Ref与Reactive的区别 shallowRef 与shallowReactive toRaw ---只修改数据不渲染页面 markRaw --- 不追踪数据 toRef --- 跟数据源关联 不修改UI toRefs ---设置多个toRef属性值 customRef ---自定义一个ref ref 捆绑页面的标签 总结 Ref与Reactive Ref Ref 用来创建基础类型的响应式数据,模板默认调用value显示数据.方法中修

  • Vue3关于响应式数据类型详解(ref、reactive、toRef、及toRefs)

    目录 ref reactive toRef() toRefs() ref 接受一个内部值,返回一个响应式的.可更改的 ref 对象,此对象只有一个指向其内部值的 property .value. 类型 function ref<T>(value: T): Ref<UnwrapRef<T>> interface Ref<T> { value: T } 详细信息 ref 对象是可更改的,也就是说你可以为 .value 赋予新的值.它也是响应式的,即所有对 .va

  • vue3+ts中ref与reactive指定类型实现示例

    目录 ref 的基础特性 如何在ref中指定类型 reactive isRef.isReactive toRef.toRefs.toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数,第一次赋值任意类型,然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} conso

随机推荐