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中swiper vue-awesome-swiper的使用方法及各种坑解决
这篇文章主要介绍了vue中swiper vue-awesome-swiper的使用方法及各种坑解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue中控制v-for循环次数的实现方法
今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue.js实现条件渲染的实例代码
这篇文章主要介绍了vue.js实现条件渲染的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue.js 获取select中的value实例
下面小编就为大家分享一篇vue.js 获取select中的value实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue引入路径正确但一直报错问题:Already included file name&n
这篇文章主要介绍了Vue引入路径正确但一直报错:Already included file name ‘×××‘ differs from file name ‘×××‘ only in casing.具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Vue router重定向redirect如何传值问题
这篇文章主要介绍了Vue router重定向redirect如何传值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue监听滚动条页面滚动动画示例代码
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue监听滚动条页面滚动动画的相关资料,需要的朋友可以参考下
2023-06-06
Vue如何将当前窗口截图并将数据base64转为png格式传给服务器
这篇文章主要介绍了Vue如何将当前窗口截图并将数据base64转为png格式传给服务器,通过实例代码介绍了将当前窗口截图,并将数据存储下来,需要的朋友可以参考下
2023-10-10
element-ui table span-method(行合并)的实现代码
element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，非常具有实用价值，需要的朋友可以参考下
2018-12-12
vue中使用带隐藏文本信息的图片、图片水印的方法
这篇文章主要介绍了vue中使用带隐藏文本信息的图片、图片水印的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04