文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

在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', 
  
  // 注意:在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,就能实现响应式了。

总结

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯