Vue.set 方法原理

javascript 复制代码
function set(target, key, value) {
  // 判断是否是数组,并且 key 是一个有效的索引值
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, value)
    return value
  }
  
  // 判断 key 是否已经存在于 target 中
  if (key in target && !(key in Object.prototype)) {
    target[key] = value
    return value
  }
  
  // 获取 target 的响应式对象
  const ob = target.__ob__
  
  // 判断 target 是否是响应式对象
  if (target._isVue || (ob && ob.vmCount)) {
    // 非生产环境下发出警告,不能给 Vue 实例或根数据对象添加新的 property
    // 因为 Vue 实例是代理了根数据对象,并且 Vue.set 无法触发视图更新
    console.warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return value
  }
  
  // 如果 target 不是响应式对象,直接将 key 和 value 添加到 target 中
  if (!ob) {
    target[key] = value
    return value
  }
  
  // 将 key 添加到 target 中,并将 key 设置为响应式
  defineReactive(ob.value, key, value)
  ob.dep.notify()
  return value
}

上述代码中首先判断了 target 是否是数组,并且 key 是一个有效的索引值,如果满足条件,则使用 splice 方法将 value 添加到 target 中。

接着判断了 key 是否已经存在于 target 中,如果存在,则直接更新 target[key] 的值。

然后判断了 target 是否是 Vue 实例或根数据对象,如果是,则发出警告,不能给 Vue 实例或根数据对象添加新的 property。

最后判断了 target 是否是响应式对象,如果是,则使用 defineReactive 方法将 key 添加到 target 中,并将 key 设置为响应式。

相关推荐
星语卿20 分钟前
浏览器重绘与重排
前端·浏览器
西瓜_号码21 分钟前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
小小小小宇34 分钟前
前端实现合并两个已排序链表
前端
yngsqq1 小时前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk1 小时前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan1 小时前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE1 小时前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年1 小时前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能1 小时前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房1 小时前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端