脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 - ref和reactive的区别

vue3 中ref和reactive的区别讲解

 更新时间：2022年12月19日 09:49:33   作者：wx60d4764eb475e  
如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value，如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value，这篇文章主要介绍了vue3 中ref和reactive的区别,需要的朋友可以参考下

1. ref和reactive区别:
    如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value
    如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value

   2. Vue是如何决定是否需要自动添加.value的
    Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,
    如果是就自动添加.value, 如果不是就不自动添加.value

   3. Vue是如何判断当前的数据是否是ref类型的
    通过当前数据的__v_ref来判断的
    如果有这个私有的属性, 并且取值为true, 那么就代表是一个ref类型的数据

数据是ref类型

<template>
  <div>
    <p>{{ age }}</p>
    <button @click="Fn">按钮</button>
  </div>
</template>
 
<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // ref类型在底层会自动转换成reactive类型
    // ref(18) -> reactive({value: 18})
    let age = ref(18);
 
    function Fn() {
      age.value = 666;
　　　　console.log(age)
    }
    return { age, Fn };
  },
};
</script>

点击按钮，页面数据变成666了，注意，vue模板中没有age.value,因为ref类型的数据有isRef属性，底层自动会将.value加上

 数据是reactive类型

<template>
  <div>
    <p>{{age}}</p>
    <button @click="Fn">按钮</button>
  </div>
</template>
 
<script>
 
import {reactive} from 'vue';
 
export default {
  name: 'App',
  setup() {
    let age = reactive({value: 18});
    function Fn() {
        age.value = 666;
　　 console.log(age)
    }
    return {age, Fn}
  }
}
</script>

点击按钮，页面还是个对象数据，因为是reactive类型数据，没有isRef属性，vue不会自动在模板添加.value, 所以我们需要手动在模板添加age.value

我们如何判断数据到底是ref还是reactive?

  通过isRef / isReactive 方法

<template>
  <div>
    <p>{{age}}</p>
    <button @click="Fn">按钮</button>
  </div>
</template>
 
<script>
 
  import {reactive} from 'vue';
 
export default {
  name: 'App',
  setup() {
    let age = reactive({value: 18});
    function Fn() {
       console.log(isRef(age)); //false
        console.log(isReactive(age));  //true
        age.value = 666;
    }
    return {age, Fn}
  }
}
</script>

扩展知识点：vue3 中 reactive 和 ref 对比区别

定于数据角度对比：ref 用来定义：基本类型数据
reactive 用来定义：对象、或数组类型的数据
备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过 reactive 转为代理对象

原理角度对比：ref 通过 Object.defineProperty() 的 get 与 set 来实现响应式的（数据劫持）
reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过Reflect 操作源对象内部的数据。

使用角度对比：ref 定义的数据：操作数据需要 .value,读取数据时模版中直接读取不需要 .valuereactive 定义的数据：操作数据与读取数据，均不需要 .value

到此这篇关于vue3 中ref和reactive的区别讲解的文章就介绍到这了,更多相关vue3 - ref和reactive的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vuejs手把手教你写一个完整的购物车实例代码

    vuejs手把手教你写一个完整的购物车实例代码

    这篇文章主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue中使用swiper轮播图的正确姿势(亲测有效)

    vue中使用swiper轮播图的正确姿势(亲测有效)

    最近在用Vue制作移动端项目,碰到了轮播图的制作,接下来就让小编一步一步带大家动作制作吧,下面这篇文章主要给大家介绍了关于vue中使用swiper轮播图的正确姿势,需要的朋友可以参考下
    2022-06-06
  • vue组件中修改组件外元素样式的两种解决方案

    vue组件中修改组件外元素样式的两种解决方案

    这篇文章主要介绍了vue组件中修改组件外元素样式,本文给大家分享两种解决方案帮助大家解决这样的问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-05-05
  • Vue实现网页转PDF方法流程详解

    Vue实现网页转PDF方法流程详解

    在日常的工作中，有时候会碰到需要将某个网址网页保存成为pdf的情况，这篇文章主要介绍了用Vue实现网页转PDF的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue实现面包屑的方法

    vue实现面包屑的方法

    这篇文章主要为大家详细介绍了vue实现面包屑的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 使用vue实现滑动滚动条来加载数据

    使用vue实现滑动滚动条来加载数据

    在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下
    2023-10-10
  • 使用mockjs如何生成随机数据

    使用mockjs如何生成随机数据

    Mockjs是一个用于生成随机数据和拦截Ajax请求的库,可以与Vue和Axios结合使用,提高前端开发效率,通过在项目中引入Mock.js文件,可以模拟后端API,拦截Ajax请求并返回自定义响应,这种方法适用于在后端尚未开发完成时的前端开发测试
    2024-10-10
  • vue 使用eventBus实现同级组件的通讯

    vue 使用eventBus实现同级组件的通讯

    这篇文章主要介绍了vue 使用eventBus实现同级组件的通讯,需要的朋友可以参考下
    2018-03-03
  • 如何在vue中使用HTML 5 拖放API

    如何在vue中使用HTML 5 拖放API

    这篇文章主要介绍了如何在vue中使用HTML 5 拖放API，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2021-01-01
  • 基于axios 的responseType类型的设置方法

    基于axios 的responseType类型的设置方法

    今天小编就为大家分享一篇基于axios 的responseType类型的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论