我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue3ref和reactive的区别详解

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

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue3ref和reactive的区别详解

源码分析视频 点击进入

Ref

ref数据响应式监听。ref 函数传入一个值作为参数,一般传入基本数据类型,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改变和访问,都会被跟踪到,就像我们改写后的示例代码一样,通过修改 count.value 的值,可以触发模板的重新渲染,显示最新的值

<template>
  
  <h1>{{name}}</h1>
  <h1>{{age}}</h1>
  <button @click="sayName">按钮</button>
</template>

<script lang="ts">
import {ref,computed} from 'vue' 

export default {
  name: 'App',
  setup(){
    const name = ref('zhangsan')
    const birthYear = ref(2000)
    const now = ref(2020)
    const age = computed(()=>{
      return now.value - birthYear.value
    })
    const sayName = () =>{
      name.value = 'I am ' + name.value
    }
    return {
      name,
      sayName,
      age
    }
  }
}
</script>


reactive

reactive是用来定义更加复杂的数据类型,但是定义后里面的变量取出来就不在是响应式Ref对象数据了

所以需要用toRefs函数转化为响应式数据对象

在这里插入图片描述

将上面用ref写的代码转化成reactive型的代码

<template>
  <!-- <img alt="Vue logo" class="lazy" data-src="./assets/logo.png"> -->
  <div>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <button @click="sayName">按钮</button>
  </div>
</template>

<script lang="ts">
import { computed, reactive,toRefs } from "vue";

interface DataProps {
  name: string;
  now: number;
  birthYear: number;
  age: number;
  sayName: () => void;
}

export default {
  name: "App",
  setup() {
   

    const data: DataProps = reactive({
      name: "zhangsan",
      birthYear: 2000,
      now: 2020,
      sayName: () => {
        console.log(1111);
        console.log(data.name);
        
        data.name = "I am " + data.name;
        console.log(data.name);
      },
      age: computed(() => {
        return data.now - data.birthYear;
      }),
    });

    const refData = toRefs(data)
    refData.age
    return {
      ...refData,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

到此这篇关于vue3 ref 和reactive的区别详解的文章就介绍到这了,更多相关vue3 ref 和reactive 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

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

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

vue3ref和reactive的区别详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue3ref和reactive的区别详解

本文主要介绍了vue3ref和reactive的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-03-19

详解vue3中ref和reactive用法和区别

vue3中ref和reactive区别 1、前言2、基本用法2.1 ref2.2 reactive 3、ref和reactive定义数组对比3.1 ref定义数组3.1 reactive定义数组 4、ref 和reactiv
2023-08-30

vue3 中ref和reactive的区别讲解

如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value,如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value,这篇文章主要介绍了vue3 中ref和reactive的区别,需要的朋友可以参考下
2022-12-19

vue3 ref和reactive的区别有哪些

本文小编为大家详细介绍“vue3 ref和reactive的区别有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3 ref和reactive的区别有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。R
2023-07-05

Vue3响应式方案及ref reactive的区别详解

众所周知ref和reactive都是用来作响应式数据,下面这篇文章主要给大家介绍了关于Vue3响应式方案及ref reactive区别的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-12-19

Vue.js 3 中 ref 和 reactive 有何区别?

关键点reactive() 只接受对象作为参数, 不支持 JS 原始类型 (String, Boolean, Number, BigInt, Symbol, null, undefined)ref()
Vue.js 3 中 ref 和 reactive 有何区别?
2022-06-22

一步步从Vue3.x源码上理解ref和reactive的区别

vue3的数据双向绑定,大家都明白是proxy数据代理,但是在定义响应式数据的时候,有ref和reactive两种方式,如果判断该使用什么方式,是大家一直不很清楚地问题,下面这篇文章主要给大家介绍了关于从Vue3.x源码上理解ref和reactive的区别的相关资料,需要的朋友可以参考下
2023-02-06

Redis和Memcached的区别详解

Redis的作者Salvatore Sanfilippo曾经对这两种基于内存的数据存储系统进行过比较: 1.Redis支持服务器端的数据操作:Redis相比Memcached来说,拥有更多的数据结构和并支持更丰富的数据操作,通常在Memca
2022-06-04

bashshell和dashshell的区别详解

本文主要介绍了bashshell和dashshell的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-05-19

Linux下“/”和“~”的区别详解

”/“是根目录,”~“是家目录。linux存储是以挂载的方式,相当于PofNAHfXm是树状的,源头就是”/“,也就是根目录。而每个用户都有”家“目录,也就是用户的个人目录,比
2022-06-04

编程热搜

目录