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传递了其他对象(如时间对象),默认情况下修改对象界面不会自动更新,如果想更新,可以通过给对象重新赋值来解决

2.ref

既然有了reactive,为何还要ref呢?当我们只想让某个变量实现响应式的时候,采用reactive就会比较麻烦,因此vue3提供了ref方法进行简单值的监听,但并不是说ref只能传入简单值,他的底层是reactive,所以reactive有的,他都有。还是那句老话:

死死记住:ref本质也是reactive,ref(obj)等价于reactive({value: obj})

  • 在vue中使用ref的值,不用通过.value获取
  • 在js中使用ref的值,必须通过.value获取

二、shallowRef和shallowReactive

递归监听和非递归监听
ref和reactive都属于递归监听,也就是数据的每一层都是响应式的,如果数据量比较大,非常消耗性能,非递归监听只会监听数据的第一层。

1. ref和shallowRef

  • ref定义的数据每一层都是响应式数据
  • shallowRef定义的数据,只有第一层是响应式的,即只有在更改.value的时候才能实现响应式
let age = ref({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//打印各层数据
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

let age = shallowRef({
      a: '1',
      f: {
        b: '2',
        s:{
          c: '3'
        }
      }
    })
//打印各层数据
console.log(age);
console.log(age.value);
console.log(age.value.f);
console.log(age.value.f.s);

使用shallowRef后,可以通过triggerRef()方法主动更新界面,实现界面刷新

function doSome(){
  age.value.f.s.c = 'c';
  //主动更新界面
  triggerRef(age);
}

2. reactive和shallowReactive

注意:shallowReactive没有类似triggerRef()的方法

三、toRaw

toRaw的出现是解决什么问题呢?

有些时候我们不希望数据进行响应式实时更新,可以通过toRaw获取ref或reactive引用的原始数据,通过修改原始数据,不会造成界面的更新,只有通过修改ref和reactive包装后的数据时才会发生界面响应式变化。

let obj1 = {...};
//state和obj1是引用关系,state的本质是一个Proxy对象,其中引用了obj1
let state = reactive(obj1);
//通过toRaw方法获取到原始数据,其实是获取到obj1的内存地址,obj2和obj1是完全相等的
let obj2 = toRaw(state)
console.log(obj1 === obj2);//true

有些同学会问,那直接使用obj1来修改数据不就行了吗?可关键是我们在使用reactive定义数据时一般不会先定义一个obj,再将他传给reactive,都是直接在reactive中写数据的。

四、markRaw

与toRaw不同,markRaw包装后的数据永远不会被追踪!

暂时没发现有什么用处(手动狗头)

let obj1 = {name: "lijing", age: 18}
let obj2 = markRaw(obj1);
//此时reactive包装的数据虽然是响应式对象,但是不会被跟踪,也不会产生效应式效果
let state1 = reactive(obj2)

console.log(obj1 === obj2);//true

五、toRef和toRefs

ref和toRef都是用来构造响应式数据,两者有什么区别呢,看两个例子

1. ref

复制,修改响应式数据不会影响以前的数据,数据发生改变界面就会自动更新

转换后的是一个RefImpl类型

可以看到,使用ref对一个对象的某个简单数据类型属性进行响应式改造后,通过修改响应式数据不会影响到原始数据,如上图中,通过state1修改值后,obj1中的a属性值没有发生变化。这里有个注意点:修改的这个属性必须是简单数据类型,一个具体的值,不能是引用,如果该属性也是一个对象,则会影响,因为对象--->引用!

例如上面例子中,如果传入state1的是obj1.f,则情况完全不同

//等价于let state1 = ref({b: '2',s: {c: '3'}})
// 又等价于--->let state1 = reactive({value: {....}}})
let state1 = ref(obj1.f);

2.  toRef

如果使用toRef来转换,则修改响应式数据会影响到原始数据,数据发生改变,但是界面不会自动更新

转换后的是一个ObjectRefImpl类型

ref类似深拷贝,toref类似浅拷贝

3.  toRefs

遍历对象中的所有属性,将其变为响应式数据,这是因为toRef只能传一个key,toRefs所达到的效果与toRef一样

tips:目前用的最多的还是ref和reactive,其他东西一般是后期用来改善性能使用的。

总结

到此这篇关于Vue3中ref与reactive的文章就介绍到这了,更多相关Vue3 ref与reactive内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3组合API中setup、 ref、reactive的使用大全

    1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变量的变化哈!我们将会利用它 ref 在vue中内置,需要导入. <template> <div>{{ countNum}}</div> <button @click="handerFunc">按钮</button> </te

  • 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的基本使用及区别详析

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

  • Vue3中使用Supabase Auth方法详解

    目录 引言 安装Supabase 设置Supabase 创建一个AuthUser组合 创建页面 注册.vue EmailConfirmation.vue 登录.vu ForgotPassword.vue Me.vue login() loginWithSocialProvider() logout() isLoggedIn() register() update() sendPasswordResetEmail() 观察Auth状态的变化 测试东西 注销 家庭作业 总结 引言 Supabase是

  • Vue3中watch监听使用详解

    目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

  • 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中的组合式 API示例详解

    目录 为什么要有组合式 API? 更好的逻辑复用 更灵活的代码组织 更好的类型推导 生产包体积更小 与选项式 API 的关系 组合式 API 是否覆盖了所有场景? 可以同时使用两种 API 吗? 选项式 API 会被废弃吗? 组合式 API 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件.它是一个概括性的术语,涵盖了以下方面的 API: 响应性 API:例如ref()和reactive(),使我们可以直接创建响应式状态.计算属性和侦听器. 生命周期钩子:例如o

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

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

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

随机推荐