Vue3 toRef，toRefs | toRaw

已于 2023-12-05 20:19:33 修改
阅读量420 收藏 9
点赞数
分类专栏： # Vue 文章标签： vue3
于 2023-12-05 20:17:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_fole_you/article/details/134816279
版权

toRef / toRefs

使 获取到的 响应式对象的属性 也具有响应式
也就是单独修改获取到的属性 原本响应式对象也会更新；反之亦然。

toRefs 主要方便解构语法，底层也是调用 toRef

toRaw

去响应式结果
结果已经保存在内部属性中，toRaw 直接访问属性得到
obj[__v_raw]

海胆Sur
关注
专栏目录
# Vue3 toRef 和 toRefs 函数.doc
07-11
Vue3 中的 toRef 和 toRefs 函数详解 在 Vue3 中，响应式数据是一种非常重要的概念，它使得我们的应用程序能够实时更新数据，从而提高用户体验。那么，在 Vue3 中，我们如何创建响应式数据呢？这篇文章将介绍 Vue3 ...
vue3 devtools 版本6.5.0
05-04
Vue3 DevTools 版本6.5.0是一款强大的开发者工具，专为Vue.js 3.x框架设计，用于帮助前端开发者在Chrome浏览器中调试Vue应用。这个版本的更新旨在优化用户体验，提供更精确的组件检测和性能分析功能。在Chrome浏览器...
vue3中使用tinyMCE
07-01
在Vue3中集成TinyMCE是一个常见的需求，特别是在构建富文本编辑器场景下。TinyMCE是一个功能强大的JavaScript WYSIWYG（所见即所得）编辑器，它提供了丰富的文本格式化选项，使得用户可以方便地创建和编辑HTML内容。...
vue3-captcha（vue3行为验证码）
06-20
Vue3-Captcha是一款专为Vue3框架设计的行为验证码插件，旨在提高网站的安全性，防止自动化脚本或机器人进行恶意操作。Vue3是Vue.js框架的最新版本，它引入了许多性能优化和开发体验改进，包括Composition API、...
vue3企业门户管理系统.zip
最新发布
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。测试代码可运行。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者...
Vue 渲染函数 render 函数，h() 创建 VNode 虚拟节点 | js 实现模板功能 | 函数式组件
海胆的博客
08-08 6705
相较于模板，应用于更加灵活的场景 预备知识实例 property 的 api
关于Vue中 命名大小写（驼峰式自动转译成短横线式） 的问题
海胆的博客
08-11 2911
字符串模板: 对象中作为templet的属性值，是出现在js中的， DOM模板: 直接作用与HTML代码中，是出现在<templet>标签中的。 因为HTML标签的属性名是大小写不敏感的，会被自动识别成小写 因此无法在标签标签中使用驼峰命名，但js却可以使用驼峰命名 为了解决这个冲突，Vue会在底层自动将短横线式等价为命名驼峰式，使用短横线命名在DOM模板中使用 组件名、props等都会涉及到这个问题 DOM模板中只有短横线名名适用 组件名 如果使用驼峰式，则为大驼峰（首字母大写） 组件名.
Vue2 项目 迁移到 Vue3 的方法记录 包含element-ui
海胆的博客
09-24 2398
由于element-ui 未对 Vue3 兼容，导致官方提供的构建版本不能使用 下面手动进行迁移 element-ui 换成 element-plus 处理两者不兼容的代码 vue2 改为 vue3 相应的依赖和配置也需要做修改 el-subMenu -》 el-sub-menu el-dialog 下 :visible.sync 替换成 v-model el-date-picker 移除了 picker-options 转而将它们拆分成单个选项进行配置 事件总线 替代品 以上仅为我所遇到不兼容， 详细请
Vue3 组件注册 全局注册和局部注册
海胆的博客
07-29 2380
全局注册 字符串注册 全局注册 app.component('component-name', { data() { return { count: 0 } }, props: ['title'], template: ` <h4>{{ title }}</h4> <button @click="count++"> You clicked me {{ count }} times. </.
Vue3 自定义事件
海胆的博客
07-29 2004
参考教程 事件名 会自动把 驼峰转kebab-case （HTML标签不区分大小写这个问题） props 自定义事件 组件 的命名都存在自动转化。如果你使用的是字符串模板，这个限制就不适用。 emits 选项 当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。 设置验证 与props类似，可以通过数组语法和对象语法 来定义自定义事件 通过对象语法配置事件抛出验证： { emits: { // 验证submit 事件 submit: ({
Vue3 setup 组合式API ＜script setup＞
海胆的博客
03-26 1610
处于beforeCreate 和 created 生命周期 vue3生命周期 =》setup函数中是无法 使用 data 和 methods 中的数据和方法 =》setup函数中的this修改成了 undefined 什么是组合式api?
Vue3 props 类型检查 输入验证 保证单项数据流
海胆的博客
07-29 1447
传入一个对象的所有 property post: { id: 1, title: 'My Journey with Vue' } <blog-post v-bind="post"></blog-post> 等价于： <blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>
在 v-for 中，使用 v-model
海胆的博客
11-30 1264
参考博客 直接绑定会变成拼接的字符串, 需要用 v-bind 代替 :value="'form.' + item.prop" 注意：千万别把 from 写成 from，我是sb ????
Vue3 笔记 指令 选项api class类与style样式
海胆的博客
07-15 1023
Vue 的核心是 声明式渲染 声明式的特点在于 通过改变声明来决定样式，而不是直接去操作 dom 改变 vue通过mount挂载，将声明的数据与dom联系起来，并实现响应式变化（一处变化同步变化） Vue 提供了一些特殊的响应式 v-bind: 绑定属性attribute 简写’:’ 让该属性与声明的数据保持一致 v-on: 对事件监听 创建Vue应用的对象参数 Vue.createapp({}) { data() { return { xxx: xxx, xxxx: xx }
Vue v-model 在组件上用法(prop emit相关规定 修饰符的访问)
海胆的博客
07-29 920
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property 和 change 事件； select 字段将 value 作为 prop 并将 change 作为事件。 ...
Vue 响应式深入 响应式的实现原理 响应式基础
海胆的博客
08-10 851
一处数据发生变化，与他相关的内容会同步发生变化。
Vue3 watch 侦听器 | watchEffect
海胆的博客
08-11 807
watch 允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。watch 需要侦听特定的数据源，并在回调函数中执行 effect。watch 与用字符串确定监听对象，只能将顶层的或属性名作为字符串传递对于更复杂的表达式，需要用一个函数取代当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为引用的对象/数组并没有发生改变。
Vue3 slot 插槽 v-slot 具名插槽 作用域插槽
海胆的博客
03-18 754
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。可以在标签内设置插槽的默认内容。
Vue3 ref 与 reactive
海胆的博客
05-17 722
两者都能构建响应式对象，但更新方式不同 ref 只能对其值整体的替换，对象亦如此 reactive 只能用.属性的方式，不能整体替换
vue3 toref和torefs
08-16
- *1* [vue3之toRef、toRefs](https://blog.csdn.net/qq_52421092/article/details/131085448)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值