没有合适的资源?快使用搜索试试~ 我知道了~
# Vue3 toRef 和 toRefs 函数.doc
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 0 下载量 40 浏览量
2022-07-11
00:36:30
上传
评论
收藏 733KB DOC 举报
温馨提示
试读
13页
# Vue3 toRef 和 toRefs 函数.doc
资源推荐
资源详情
资源评论
# Vue3 toRef 和 toRefs 函数
Vue3 toRef 和 toRefs 函数
上一篇文章介绍了 vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要
来说一下 toRef 函数和 toRefs 函数的基本使用。
toRef 函数
通过上一篇文章,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也
是创建一个响应式的数据,那么他们之间的区别是什么呢?
首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数据的交互。什么意思
呢?就是 ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,是不会
影响到源数据,但是视图层上的数据会被更新。但是 toRefs 函数的本质是引用,也就是说,
toRef 函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成
视图层数据的更新。
上面这段话理解吗?不理解的话没关系,下面通过几个案例就可以明白了。
toRef 函数使用
首先呢, toRef 函数有两个参数。
toRef(操作对象, 对象属性)
好,接下来我们使用 toRef 函数写一个案例,还是和以前一样,页面展示一个用户的名
称和年纪。
toRef toRefs 函数
姓名:{{boy_toRef}}
年龄:{{boy.age}}
import { toRef } from ‘vue’
export default {
setup() {
const boy = { // 创建一个用户对象
name: ‘我是𝒆𝒅.’, // 用户名称
age: 10 // 用户年龄
}
// 使用 toRef 函数包裹,操作 boy 对象的 name 属性
const boy_toRef = toRef(boy, ‘name’)
console.log(boy_toRef) // 我们直接打印看一下包裹后的数据格式
return { boy, boy_toRef }
}
}
保存代码,刷新页面。
我们可以看到数据的结构,在 value 里面直接就是 boy 下面 name 的属性值,所以说,
接下来我们编写一个按钮,点击按钮,修改这个 name 值。
toRef toRefs 函数
姓名:{{boy_toRef}}
年龄:{{boy.age}}
修改 name
import { toRef } from ‘vue’
export default {
setup() {
const boy = {
name: ‘我是𝒆𝒅.’,
age: 10
}
// 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
const boy_toRef = toRef(boy, ‘name’)
const btn = () => {
boy_toRef.value = ‘𝒆𝒅.’ // 把 name 修改成 𝒆𝒅.
console.log(boy_toRef) // 修改完成打印一下结果
}
return { boy, btn, boy_toRef }
}
}
保存代码刷新页面,然后点击按钮看一下页面效果。
通过截图展示的效果我们可以发现,boy_toRef 的值确实被修改了,但是呢,页面并没有
改变,而且页面也没有出现错误。
剩余12页未读,继续阅读
资源评论
- 陈后主2023-06-17正在使用 标题为 的句子没有完成,请提供完整的句子。
书博教育
- 粉丝: 1
- 资源: 2835
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功