一起学Vue3源码，实现最简Vue3【12】 - 实现 isRef 和 unRef 功能

最新推荐文章于 2024-07-04 11:09:39 发布
最新推荐文章于 2024-07-04 11:09:39 发布
阅读量691 收藏
点赞数
分类专栏： 一起学Vue3源码，实现最简Vue3 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aybuai/article/details/126613713
版权

实现 isRef 和 unRef 功能

什么是isRef & unRef ？
isRef 判断一个数据是否是用ref 声明的响应式数据
unRef 省略了ref .value 繁琐操作，直接获取值

ref.spec.ts

import {
    effect } from "../src/effect";
import {
    reactive } from "../src/reactive";
import {
    isRef, proxyRefs, ref, unRef } from "../src/ref";

describe("ref", () => {
   
  ...
  it("isRef", (
最低0.47元/天 解锁文章
Aybuai
关注
专栏目录
【Vue3 知识第六讲】ref、 shallowRef、unref、isRef 等系列知识应用
前端知识分享喵
09-04 3305
ref、 shallowRef、unref、isRef 等系列知识应用
Vue3 isRef
且听风吟的博客
04-29 1085
isRef：检查一个对象是被ref包装过的对象。
注意！Vue.js 或 Nuxt.js 中请停止使用.value
最新发布
CodeQi技术小栈的博客
07-04 480
由于这些变量的值是静态的，并且链接引用了对应路径上存在的静态 Vue 文件，即 URL 路径/lists/posts代表路径 /pages/lists/posts.vue中项目下的静态文件，因此这些变量的值永远不会改变。只选择那些需要响应性的变量，或者值在保持相同路径时可能发生变化的变量（例如，对于 Nuxt.js，我指的是不包括查询字符串的路径，请注意）。还有其他类似情况的变量，它们的值在服务器端或客户端端上永远不会改变，就像上述示例一样，它们可以在声明时排除。然而，有一个简单的解决方法，即使用。
vue3中的工具函数 isRef() 和 unref()
m0_46390103的博客
09-30 3032
工具函数isRef() 和 unref()使用
vue3 | isRef、unref、toRef、toRefs
保持清醒
02-09 739
vue3 | isRef、unref、toRef、toRefs
[深入vue3之refs] ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef等使用与讲解
从今年开始写写博客~~
01-10 2207
本章涉及的composition api： ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef refs api中的重点为：ref、toRefs、shallowRef、customRef，其次是 isRef 等。 ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 `.value` property，指向该内部值。 如果将对象分配为 ref 值，则它将被 `reactive` 函数处理为
一文讲清楚vue3中ref、reactive、toRef、toRefs、isRef、isReactive、unref、toValue的使用
m0_57202548的博客
01-19 1438
先看一个组件我们定义了一个count，还有一个修改它的方法，并尝试在模板中通过两种方式去修改它，但结果却是页面没有任何变化。其实通过这些操作我们已经修改了count的值，只是未能得到视图的更新，所以我们看到的还是最初的值，那如何解决呢？这就引出了响应式数据ref()用于创建一个包装基本类型值的响应式对象。它将基本类型值（如数字、字符串等）转换为响应式对象（但其实也可以是引用类型），使其具有响应式特性。ref()返回一个包含value属性的对象，通过这个属性来访问和修改值。是一个响应式对象，通过ref。
Vue3入门到精通--ref以及ref相关函数
2401_84092456的博客
05-06 675
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue3.0 reactive()、ref()、unref()、isref()、toRefs()、computed()
egegerhn的博客
03-09 277
reactive() 等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建 响应式的数据对象。 当（引用）数据 直接改变 不会让模版响应 更新渲染： 一秒后页面没有变化 <template> <div>count: {{state.count}}</div> </template> <script> export default { setup() {
工程化:vite3+vue3如何实现简单自定义的switch
峰会路转的博客
04-22 149
这张swtch切换效果，看着挺好用的，那我们怎么模拟实现这种切换动画呢,其实很简单。
彻底弄清Vue3 中ref、toRef、toRefs、isRef、unref等
油墨香^-^的博客
05-09 3575
ref(): 接收一个值并返回一个响应式的对象，可以使用.value 属性来访问和修改这个值。toRef(obj, key): 根据一个响应式对象中的一个属性，创建一个响应式的 ref，并且该 ref 和原对象中的属性保持同步。-toRefs(obj): 将一个响应式对象转换成一个普通对象，其中普通对象的每个属性都是响应式的 ref。isRef(value): 判断某个值是否是 ref 对象。unref(value): 用于解除响应式引用。
Vue3基础(三)__isRef___isReactve
见贤思齐焉，见不贤内自省
05-25 991
isRef isRef方法通过vue解构出来 import { isRef } from "vue"; 主要是为了判断自己生成的响应数据是否是通过isRef 方法生成的 <template> <div> <p @click="isRefFun">{{ refData.name }}</p> </div> </template> <script> import { ref,isRef } from "vue
vue3.0——isRef、toRef、toRefs、readonly、公共属性配置、网络配置、插件配置、路由配置
qq_56668869的博客
09-22 856
isRef、toRef、toRefs、readonly、公共属性配置、网络配置、插件配置、路由配置
vue3中的isRef toRef toRefs readonly
看见小狮子没
09-21 846
isRef 判断是否为响应性变量用法：isRef("变量"),点击按钮控制台打印从obj.name不是响应式数据看出。
Vue isRef、unref、toRef和toRefs的用法
g841805的博客
04-09 750
如果参数是ref，则返回內部值，否则返回参数本身基于响应式对象上的一个属性，创建一个对应的ref，这样创建的ref与其源属性保持同步，改变源属性的值将更新ref的值，反之亦然将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的ref，每个单独的ref都是用toRef()创建的。
vue3中的ref、isRef、shallowRef、triggerRef和customRef
m0_60189088的博客
04-24 1053
接受一个参数值并返回一个响应式且可改变的ref对象。ref对象拥有一个指向内部值的单一属性，指向内部值。例：此时，页面上的str1也跟着变化使用ref获取dom。
Vue3：可以使用.value获取ref（）包裹的值，为何还要存在unref（）
yyyyyyyyyyy_9的博客
05-22 1865
本文将介绍 unref（） 函数的示例，以及回答为什么可以使用.value获取ref（）包裹的值，还要存在unref（）。
[vue3] isRef、isProxy、isReactive、isReadonly
aXin_li的博客
06-25 311
vue3 对一些内置的属性，利用 ts 枚举提前定义，方便之后的使用，例如 isReactive、isReadonly 方法。
Vue-Router源码深度解析：路由实现机制
本文将深入Vue-Router的源码，探讨其路由实现原理。 首先，Vue-Router的核心是它如何处理URL与组件之间的映射。在创建VueRouter实例时，我们通常会传递一个`routes`数组，这个数组包含了多个对象，每个对象代表一条...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值