Vue六大基本类型中的原始值响应式
更新时间：2023年01月04日 08:40:09 作者：知奕奕
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等类型的值，在 JavaScript 中，原始值是按值传递的，引用类型是按引用传递的，这意味着，如果一个函数接收了一个原始值作为参数，那么形参和实参之间是没有引用关系的，它们是完全独立的两个值
所谓原始值即针对六大基本类型的值的响应式
ref
由于 proxy 无法阻止原始值的修改，故此方法在这里不管用
我们可以创建一个包裹对象把原始值包起来；
然后在使用 reactive 将该包裹对象变成响应式的即可
__v_isRef 属性是用来判断是否为 ref 包裹对象的判据
function ref(val) {
// 包裹对象
const wrapper = {
value: val,
};
// 是否为ref的判据
Object.defineProperty(wrapper, "__v_isRef", {
value: true,
});
// 返回响应式数据
return reactive(wrapper);
}
响应丢失
响应丢失问题：使用 reactive 创建响应式对象后，使用多参的形式 return，则实际上返回的是普通对象而非响应式对象！
export default {
setup() {
const obj = reactive({ a: 1, b: 2 });
return {
...obj,
};
},
};
响应关系建立
obj 为原响应对象
newobj 内拥有与 obj 同名的所有属性值，且均一一编写访问器属性 value
value 执行后返回原响应对象中的值
这样一来，修改 obj 属性后，便会自动触发副作用函数执行！
const obj = reactive({ a: 1, b: 2 });
const newobj = {
a: {
get value() {
return obj.a;
},
},
b: {
get value() {
return obj.b;
},
},
};
console.log(newobj.a.value);
toRef 函数的实现
使用包裹 wrapper，内部加上 getter、setter 方法实现响应式
function toRef(obj, key) {
const wrapper = {
get value() {
return obj[key];
},
set value(val) {
obj[key] = val;
},
};
Object.defineProperty(wrapper, "__v_isRef", {
value: true,
});
return wrapper;
}
自动脱 ref
使用 proxy 代理
判断如果存在属性 __v_isRef ，表示其为 ref，则返回该 ref 的值；
如果只是普通对象，那原样返回即可
function proxyRefs(target) {
return new Proxy(target, {
get(target, key, receiver) {
const value = Reflect.get(target, key, receiver);
return value.__v_isRef ? value.value : value;
},
});
}
reactive 就是一个自动脱 ref 的例子，使用他的时候无需额外调用 value 即可获取值
到此这篇关于Vue六大基本类型中的原始值响应式的文章就介绍到这了,更多相关Vue原始值响应式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
滑块验证是一种常见的人机识别方法，这篇文章主要介绍了Vue滑块验证码组件anji-captcha的使用,本文通过实例代码图文相结合给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
今天小编就为大家分享一篇vue 实现特定条件下绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
组件是可以在自己的模板中调用自身的,不过他们只能通过name选项来做这件事,下面这篇文章主要给大家介绍了关于vue3递归组件封装的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue拦截器如何增加token参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了ant-design-vue 时间选择器赋值默认时间的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随过来看看吧2020-10-10
vue.js开发实现全局调用的MessageBox组件实例代码
最近学习了Vue.js，感觉组件这个地方知识点挺多的，而且很重要，所以决定记录下，下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-11-11
正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue router返回到指定的路由的场景分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要介绍了解决vue页面渲染但dom没渲染的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue this.$refs.xxx获取dom注意事项 v-if v-for渲染的dom不能直接使用
这篇文章主要介绍了vue this.$refs.xxx获取dom注意事项 v-if v-for渲染的dom不能直接使用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论