vue3中的reactive和 ref shallowReactive和 shallowRef

最新推荐文章于 2024-05-22 17:50:13 发布
最新推荐文章于 2024-05-22 17:50:13 发布
阅读量523 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38935512/article/details/115331117
版权

reactive
reactive是vue3提供的一个响应试方法，本质是包装成来一个proxy对象(可以打印看看)，只能传对象，不然无法自动更新

import {reactive} from "vue"

setup(){
	let obj=reactive({
		list:[]
	})
}

ref
ref其实底层的本质就是reactive，ref(1)===>reactive({value:1})

判断方法

isRef(xxx)
isReactive(xxx)

区别

ref类型会自动添加value属性
reactive不会

shallowReactive和 shallowRef
本质是一样得 shallowRef(1)===>shallowReactive({value:1})

小墨宝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 中 ref、reactive、shallowRef、shallowReactive的区别详解
前端打工人的博客
06-14 1920
vue3 中 ref、reactive、shallowRef、shallowReactive的区别reactive：深度劫持（深监视）shallowReactive：浅度劫持（浅监视）ref:深度劫持（深监视），做了reactive的处理shallowRef：不做监视readonly和readonly:只读属性的数据，深度只读shallowReadonly:只读的数据，浅只读的toRaw和markRawtoRaw将代理对象变成普通对象,数据变化，界面不会进行更新。
Vue3中的shallowReactive、shallowRef和readonly、shallowReadonly
weixin_43613849的博客
09-14 338
1、shallowReactive 与 shallowRef 需要引入： import{shallowReactive,shallowRef}from'vue' shallowReactive： 只处理对象最外层属性的响应式（浅响应式）。 // let person = shallowReactive({ //只考虑第一层数据的响应式 let person = reactive({ name:'张三', age:18, ...
第六节:带你全面理解vue3 浅层响应式API: shallowRef, shallowReactive, shallowReadonly
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-22 1555
本章主要给大家讲解创建浅层响应式数据的 API, 即`shallowRef`, `shallowReactive`, `shallowReadonly`
vue3中reactive和shallowReactive的实现
longtengg1的博客
12-24 367
实现数据劫持，不实现页面更新部分 const reactiveHandler={ get(target,prop){ const result=Reflect.get(target,prop); return result; }, set(target,prop,value){ const result=Reflect.set(target,prop,value); console.log('===')
vue3中的shallowReactive
u013594477的专栏
11-26 1193
1、shallowReactive监听了第一层属性的值，一旦发生改变，则更新视图;其他层，虽然值发生了改变，但是视图不会进行更新 <template> <h3>shadowReactive:</h3> <p class="state1">{{state}}</p> <button class="btn1" @click="change1">change1</button> <button
vue3手写shallowReactive和reactive
温壁
12-29 378
1、shallowReactive const shallowReactiveHandler = { get(target,prop){ console.log('拦截到了获取数据'); return Reflect.get(target,prop); }, set(target,prop,val){ console.log('拦截到了更新数据或设置新属性'); return Reflect.set(target,p
Ref Effect baseHandler reactive Proxy Vue 3
01-04
在 Vue 3 中，引入了 `ref` 和 `reactive` 两个核心 API，它们构建在 `Proxy` 之上，为开发者提供了更直观的响应式声明方式。`ref` 主要用于创建可响应的值，它可以是一个基本类型或者一个对象。当你对 `ref` 创建的...
vue中的ref和$refs的使用
10-17
主要介绍了vue中的ref和$refs的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
# vue3 ref 和 reactive 函数.doc
07-11
Vue3 中的 Ref 和 Reactive 函数 在 Vue3 中，Ref 和 Reactive 函数是两个非常重要的概念，它们都是用于实现响应式数据的关键技术。本文将从基本概念开始，详细介绍 Ref 函数的用法、Reactive 函数的应用，以及它们...
Vue reactive ref v-bind 语法示例演示代码
最新发布
07-17
Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码...
Vue3 学习笔记 —— shallowReactive 和 shallowRef
叹之
05-05 543
shallowReactive 只处理了对象内最外层属性的响应式，适用于对象结构较深，但只有外层属性变化 shallowRef 只处理了value的响应式，不进行对象的 reactive 处理，适用于会被替换的数据 示例： <template> m1: {{m1}} <br> m2: {{m2}} <br> m3: {{m3}} <br> m4: {{m4}} <br> <button @click="change
16进制ic卡号转换（将12345678转换成78563412）
frank_fong的博客
01-14 8196
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
手写shallowReactive 与 reactive
m0_59070120的博客
10-29 145
reactive 接收一个普通对象然后返回该普通对象的响应式代理器对象，深响应式的话，判断传入的target是不是对象，对该对象中的所有数据进行reactive的递归处理，继续判断是对象还是数组，是数组的话，通过递归让其下标每一个属性都变成一个响应式代理器对象，对象的话也如此。shallowReactive只处理了对象内最外层属性的响应式(也就是浅响应式)，判断传入的target是不是对象，是的话就返回一个该普通对象的第一层响应式代理器对象（通过get，set）
vue3 shallowRef和shallowReactive
MCCLS的博客
09-14 252
shallowRef使用定义一个不会其对象内的值改变的数据时,或者每次改变都是替换掉整个对象而不是去单单替换掉其中的某个属性
vue3 shallowReactive 与 shallowRef
qq_39232387的博客
04-17 862
shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式) shallowRef: 只处理基本类型的响应式, 不进行对象的响应式处理 什么时候用浅响应式呢? 一般情况下使用ref和reactive即可 如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive 如果有一个对象数据, 后面功能不会修改该对象的属性，而是产生新的对象来替换 ===> shallowRef shallowR...
vue3知识点：shallowReactive 与 shallowRef
刘大猫
07-18 514
vue知识点：shallowReactive 与 shallowRef
observable.deep和observable.ref和observable.shallow区别
qq_38865022的博客
02-04 3318
官方解释： 官方文档地址：https://cn.mobx.js.org/refguide/api.html observable.deep: 所有 observable 都使用的默认的装饰器。它可以把任何指定的、非原始数据类型的、非 observable 的值转换成 observable。 observable.ref: 禁用自动的 observable 转换，只是创建一个 observabl...
Vue3 shallowRef 和 shallowReactive
大家好，我是 ed.
07-08 387
嗯，怎么说呢，其实这两个函数并不是很常用，在开发过程中基本上用不到，但是呢，我不写我又感觉少点啥，所以说就简单的说一下吧，其实不看也可以哈。上面说了是不是还是没看懂？没关系哈，先记住上面三条，然后详细的说一下。我们在之前的博客讲过 ref 函数和 reactive 函数，他们的作用是将数据转换成响应式的数据，在修改数据的时候，可以将数据实时展示在页面上，基本数据也好，对象也好，都是这样。但是有一个问题呀，我们在把数据改为响应式数据的时候，不管是用 ref 函数还是使用 reactive 函数，他俩都是深度监
VUE3 shallowReactive与shallowRef
qq_39241680的博客
04-13 864
shallowReactive与shallowRef
vue3中reactive和ref的区别
08-25
在Vue3中，ref和reactive都是用来定义响应式数据的方法。区别在于使用方式和访问方式。ref是对reactive的二次包装，它需要在数据访问时使用.value属性来获取实际的值。而reactive在template中使用时，不需要添加....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值