你知道Vue中神奇的$set是如何实现的吗?

 更新时间:2022年12月13日 15:43:13   作者:清风丶  
在日常开发中,$set的也是一个非常实用的API。但是我们知其然更要知其所以然,接下来就跟随小编一起看一下Vue中的$set是如何实现的吧

前言

在日常开发中,$set的也是一个非常实用的API,因为Vue2实现响应式的核心是利用了ES5的Object.defineProperty,当我们通过直接修改数组下标更改数组或者给对象添加新的属性,这个时候Object.defineproperty是监听不到数据的变化的,这时候大家就会用上$set,让修改的操作也实现响应,我们知其然更要知其所以然,接下来看一下Vue中的$set是如何实现的

应用场景

 let dataArr = ["item1"];
 let dataObject = {
      name: "ccs"
    };

    dataArr[2] = "item2";
    dataObject.age = 22;
//    响应失败,页面没有显示更新新增的数据

    this.$set(this.dataArr,2,'item2')
    this.$set(this.dataObject,'age',22)
//响应成功,页面显示更新新增的数据

set实现

接下来我们看一下$set在Vue中的定义

function set(target: Array<any> | Object, key: any, val: any): any {
  if (
    process.env.NODE_ENV !== "production" &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(
      `Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`
    );
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  const ob = (target: any).__ob__;
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== "production" &&
      warn(
        "Avoid adding reactive properties to a Vue instance or its root $data " +
          "at runtime - declare it upfront in the data option."
      );
    return val;
  }
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}

在源码中首先判断set的目标是否是undefined和基本类型如果是undefined或基本类型就报错,因为用户不应该往undefined和基本类型中set东西,然后又判断了目标是否是数组与key是不是合法的index,合法的index是指值为大于等于0的整数,如果两个条件都成立就对目标数组调用splice方法插入或者修改数组,这里的splice不是普通的splice是王维诗里的splice,是被vue代理重写过的splice

数组实现响应

$set实现数组修改响应的方式是代理重写的数组的一部分方法,接下来我们看一下具体实现

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
function def(obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configurable: true
    });
}
methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    ob.dep.notify()
    return result
  })
})

vue中代理重写的不只是splice,有push、pop、shift、unshift、splice、sort、reverse这七个方法, 首先执行了const result = original.apply(this, args)执行原本数组的方法并获取它的值,接下来判断如果是往数组中添加值就将新添加的值也实现响应式,最后一步拿到这个数组的_ob_对象_ob_里的dep进行派发更新。

想深入了解vue的响应式可以查阅往期文章面试官问你Vue2的响应式原理,你怎么答?

对象实现响应

$set中下半部分的逻辑就是用来处理对象响应的,我们接着往下看

  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  const ob = (target: any).__ob__;
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;

首先判断了属性如果在目标对象中直接return结束逻辑,因为vue只有添加目标对象中原本没有的属性时才会失去响应

例如 let obj={} obj.name='ccs',

vue在初始化的时候会将data里的所有属性都变成响应式,如果的值是对象或者数组则会new一个Observer实例储存在__ob__,想深入了解vue的响应式可以查阅往期文章面试官问你Vue2的响应式原理,你怎么答

拿到这个对象的_ob_进行判断,如果不存在就说明是未经过vue初始化的普通对象而不是响应式对象 否则就手动通过defineReactive为属性添加get方法与set方法实现响应,然后手动调用dep里的notify()发布更新。

总结

vue中$set方法对数组和对象的处理本质上的一样的,对新增的值添加响应然后手动触发派发更新。

以上就是你知道Vue中神奇的$set是如何实现的吗?的详细内容,更多关于Vue实现$set的资料请关注脚本之家其它相关文章!

相关文章

  • vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)

    vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)

    对于Vue你可以实现文件的预览功能,这篇文章主要给大家介绍了关于vue中实现支持txt,docx,xlsx,mp4格式文件预览功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue3实现动态侧边菜单栏的几种方式简单总结

    vue3实现动态侧边菜单栏的几种方式简单总结

    在做开发中都会遇到的需求,每个用户的权限是不一样的,那他可以访问的页面(路由)可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏,这篇文章主要给大家介绍了关于vue3实现动态侧边菜单栏的几种方式,需要的朋友可以参考下
    2024-02-02
  • Vuex的实战使用详解

    Vuex的实战使用详解

    这篇文章主要介绍了Vuex的实战使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue实现的上传图片到数据库并显示到页面功能示例

    vue实现的上传图片到数据库并显示到页面功能示例

    这篇文章主要介绍了vue实现的上传图片到数据库并显示到页面功能,结合实例形式分析了基于vue.js的数据库操作及页面图片显示相关操作技巧,需要的朋友可以参考下
    2018-03-03
  • 使用element-ui实现行合并过程

    使用element-ui实现行合并过程

    这篇文章主要介绍了使用element-ui实现行合并过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue项目npm操作npm run serve或npm run dev报错及二者的区别

    Vue项目npm操作npm run serve或npm run dev报错及二者

    这篇文章主要介绍了Vue项目npm操作npm run serve或npm run dev报错及二者的区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue时间组件DatePicker组件的手写示例

    vue时间组件DatePicker组件的手写示例

    这篇文章主要为大家介绍了vue时间组件DatePicker组件的手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • VUE使用draggable实现组件拖拽

    VUE使用draggable实现组件拖拽

    这篇文章主要为大家详细介绍了VUE使用draggable实现组件拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue按需加载实例详解

    vue按需加载实例详解

    在本篇文章里小编给大家整理的是关于vue按需加载实例的相关知识点内容,有需要的朋友们可以学习参考下。
    2019-09-09
  • vue3.0语法糖内的defineProps及defineEmits解析

    vue3.0语法糖内的defineProps及defineEmits解析

    这篇文章主要介绍了vue3.0语法糖内的defineProps及defineEmits解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论