马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
往期内容：
《Vue进阶教程》第二十三课：渲染计算属性的结果
《Vue进阶教程》第二十四课：优化
《Vue进阶教程》第二十五课：watch基本概念
《Vue进阶教程》第二十六课：实现侦听函数
《Vue进阶教程》第二十七课：实现侦听对象
《Vue进阶教程》第二十八课：实现新旧值
《Vue进阶教程》第二十九课：立即执行的回调
《Vue进阶教程》第三十课：watchEffect
《Vue进阶教程》第三十一课：ref的初步实现
《Vue进阶教程》第三十二课：ref响应丢失问题
《Vue进阶教程》第三十三课：toRef的使用
1) 基本使用
为了办理在赋值过程中响应丢失问题, Vue3提供了两个API
- toRef: 办理赋值问题
- toRefs: 办理展开, 解构问题
toRefs的使用
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- <script src="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script>
- </head>
- <body>
- <script>
- const { reactive, effect, toRef, toRefs } = Vue
- // obj是reactive创建的响应式数据(proxy代理对象)
- const obj = reactive({ foo: 1, bar: 2 })
- // 使用toRefs解构赋值 取代 {foo, bar} = obj
- const { foo, bar } = toRefs(obj)
- effect(() => {
- console.log('bar.value具有响应性', bar.value)
- })
- </script>
- </body>
- </html>
基本实现
- function toRefs(obj) {
- const ret = {}
- for (const key in obj) {
- ret[key] = toRef(obj, key)
- }
- return ret
- }
1源码中对obj的类型做了判断
a如果不是reactive类型的对象, 提示警告
b支持代理是数组的情况
vue3.2.41源码- toRefs实现
- function toRefs(object) {
- // 如果传入的对象不具备响应性, 提示警告
- if (!isProxy(object)) {
- console.warn(
- `toRefs() expects a reactive object but received a plain one.`
- )
- }
- // 支持代理是数组的情况
- // - 对象的情况: toRefs(reactive({foo: 1, bar: 2})) => {foo: ref(1), bar: ref(2)}
- // - 数组的情况: toRefs(reactive(['foo', 'bar'])) => [ref('foo'), ref('bar')]
- const ret = isArray(object) ? new Array(object.length) : {}
- for (const key in object) {
- ret[key] = toRef(object, key)
- }
- return ret
- }
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- <script src="./reactive.js"></script>
- </head>
- <body>
- <script>
- // obj是响应式数据
- const obj = reactive({ foo: 1, bar: 2 })
- // 解构赋值
- const { foo, bar } = toRefs(obj)
- effect(() => {
- console.log('foo.value具备响应性:', foo.value)
- })
- </script>
- </body>
- </html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
