theme: channing-cyan
开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情 大家好，我是初心，本篇是源码系列之ref、toRef、toRefs,如有错误，欢迎指正??在讨论原始值的响应式方案，先看看原始值有哪些吧，目前阶段原始值分别是 Boolean, Number，BigInt, String, Symbol, undefined, null
前言
一、引入ref的概念
由于proxy代理目标必须是非原始值，所以我们没有任何手段拦截对原始值的操作，例如：let name = 'luanshu';
// 无法拦截对值的修改
name = '巧君';
import { reactive } from 'Vue';
const wrapper = {
value: 'luanshu'
}
// 可以使用 Proxy 代理wrapper,简洁实现对原始值的拦截
const userName = reactive(wrapper);
// 读取value
name.value // luanshu
// 修改值可以触发响应式
name.value = '巧君';
- 用户为了创建一个响应式的原始值，不得不顺带创建一个包裹对象；
- 包裹对象有用户定义，而这以为着不规范，用户可以随意命名，例如wrapper.value 或者 wrapper.val 都是可以的。
// 封装一个 ref 函数
function ref(val){
// 在ref函数内部包裹对象
const wrapper = {
value: val,
}
// 将包裹对象变成响应式数据
return wrapper;
}
import { effect } from 'Vue';
// 创建原始值的响应式数据
const refValue = ref('栾树');
effect(()=>{
// 在函数副作用下 通过 value 值读取原始值
console.log(refValue.value);
})
// 修改值能够触发副函数重新执行
refValue.value = 'luanshu';
import { ref, reactive } from 'Vue';
// ref
const refValue = ref(1);
// reactive
const reactiveValue = reactive({ value: 1 });
import { reactive } from 'Vue';
function ref(val){
// 在ref函数内部包裹对象
const wrapper = {
value: val,
}
// Object.defineProperty
Object.defineProperty(wrapper, '__v_isRef', {
value: true,
})
// 将包裹对象变成响应式数据
return reactive(wrapper);
}
二、响应丢失问题
ref除了用于原始值响应式方案之外，还能用来解决响应式丢失问题，首先，我们需要看下响应式丢失问题<template>
<div>姓名:{{ userName }} / 花名: {{ flowerName }}</div>
</template>
<script>
import { reactive } from 'Vue';
export default{
setup(){
const wrapper = reactive({ flowerName: '栾树', userName: '巧君' })
// 1s 后修改响应式数据的值 不会触发重新渲染
setTimeout(()=>{
wrapper.flowerName = 'luanshu';
},1000)
// 这里丢失响应式
return {
...wrapper
}
},
}
</script>
const wrapper = reactive({ flowerName: '栾树', userName: '巧君' })
return {
...wrapper
}
// 等价于
return {
flowerName: '栾树',
userName: '巧君'
}
import { reactive } from 'Vue';
const wrapper = reactive({
flowerName: '栾树',
userName: '巧君'
});
// 通过对象访问器属性 value 当读取到 value 值时， 其实读取的是 wrapper 对象下对应的属性值
const newObj = {
flowerName: {
get value(){
return reactive.flowerName
}
},
userName: {
get value(){
return reactive.userName
}
}
}
effect(()=>{
// 在副函数作用域访问 newObj.userName
console.log(newObj.userName);
})
// 这个时候就可以触发响应式了
wrapper.userName = '巧军';
{
get value(){
return wrapper.flowerName;
}
}
import { reactive } from 'Vue';
const wrapper = reactive({ age: 25, userName: '巧君' });
const newObj = {
age: {
get value(){
return wrapper.age;
}
},
userName: {
get value(){
return wrapper.userName
}
}
}
function toRef(obj, key){
const wrapper = {
get value(){
return obj[key];
}
}
return wrapper;
}
import { toRef,reactive } from 'Vue';
const wrapper = reactive({ age: 25, userName: '栾树' })
const newObj = {
age: toRef(wrapper, 'age'),
userName: toRef(wrapper, 'userName'),
}
import { toRef } from 'Vue';
function toRefs(obj){
const ret = {};
// 使用 for...in 循环遍历对象
for(const key in obj){
// 逐个调用 toRef 完成转换
ret[key] = toRef(obj, key);
}
}
import { toRefs,reactive } from 'Vue';
const wrapper = reactive({ age: 25, userName: '栾树' })
const newObj = {
...toRefs(wrapper);
}
console.log(newObj.age.value) // 25
function toRef(obj,key){
const wrapper = {
get value () {
return obj[key];
}
}
// 定义一个 __v_isRef 属性
Object.defineProperty(wrapper, '__v_isRef', {
value: true
})
return wrapper;
}
import { reactive, toRef } from 'Vue';
const wrapper = reactive({ age: 25, userName: '巧君' });
const refWrapper = toRef(wrapper, 'age');
refWrapper.value = 18; // 无效
function toRef(obj, key){
const wrapper = {
get(){
return obj[key];
},
// 允许设置值
set(val){
obj[key] = val
}
}
Object.defineProperty(wrapper, '__v_isRef', {
value: true,
})
return wrapper;
}
三、自动脱ref
toRefs 函数的确解决了响应式丢失问题，但同时也带来了新的问题，由于 toRefs 会吧响应式数据的第一层属性值转换为 ref, 因此必须通过 value 属性值访问， 如以下代码:// 创建一个普通对象
const weapper = {
flowerName: '栾树',
userName: '巧君'
}
console.log(weapper.flowerName); // 栾树
console.log(weapper.userName); // 巧君
// 通过 toRefs 包装
const newWrapper = {
...toRefs(weapper)
}
// 必须通过 value 访问值
console.log(newWrapper.flowerName.value);
console.log(newWrapper.userName.value);
<template>
<div>
<p>{{ flowerName }} / {{ userName }}</p>
{{ '用户不希望编写以下的代码' }}
<p>{{ flowerName.value }} / {{ userName.value }}</p>
</div>
</template>
console.log(newWrapper.flowerName); // 栾树
// proxyRefs
function proxyRefs(target){
return new Proxy(target, {
get(target, key, receiver){
const value = Reflect.get(target, key, receiver);
// 自动脱 ref 实现 如果读取的值是 ref, 则返回它的 value 属性值
return value.__v_isRef ? value.value : value;
}
})
}
// 调用 proxyRefs
const weapper = {flowerName: '栾树',userName: '巧君'};
const newWrapper = proxyRefs({
...toRefs(weapper)
});
console.log(newWrapper.flowerName); // 栾树
<template>
<p>{{ count }}</p>
</template>
<script>
import { ref } from 'Vue';
const ClComponent = {
setup(){
const count = ref(0);
// 返回的这个对象会传递给 proxyRefs
return {
count
}
}
}
</script>
wrapper.flowerName = 'luanshu';
function proxyRefs(target){
return new Proxy(target, {
get(target, key, receiver){
const value = Reflect.get(target, key, receiver);
// 自动脱 ref 实现 如果读取的值是 ref, 则返回它的 value 属性值
return value.__v_isRef ? value.value : value;
},
set(target, key, newValue, receiver){
// 通过 target 读取真实值
const value = target[key];
// 如果值是 ref 则设置其对应的value属性值
if(value.__v_isRef){
value.value = newValue;
return true;
}
return Reflect.set(target, key, newValue, receiver);
}
})
}
总结
我们首先介绍 ref 的概念， ref 本质上是一个 “包裹对象”。因为 JavaScript 的 Proxy 无法提供对原始值的代理，所以我们需要使用一层对象作为包裹，间接实现原始值的响应式方案。由于 “包裹对象” 本质上与普通对象没有任何区别， 因此为了区分 ref 与普通响应式对象，我们还未 “包裹对象” 定义了一个值为 true 的属性，即__v_isRef, 用它作为 ref 的标识 ref出了能够用于原始值的响应式之外，还能用解决响应式丢失的问题。为了解决该问题，我们实现了 toRef 以及 toRefs 这两个函数。它们本质上是对响应式数据做了一层包装，或者叫做 “访问代理” 最后，讲述了自动脱 ref 的能力。为了减轻用户的心智负担，我们自动对暴露到模板中的响应式数据进行脱 ref 处理。这样，用户在模块中使用响应式数据时，就无须关心一个值是不是 ref 了。感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容