Vue.js中提供了一些方法來動態地修改響應式對象中的屬性值。其中，$set方法可以添加新的屬性并響應地更新視圖。本文我們將深入探究Vue.js $set方法的源碼實現。

首先，我們知道$set方法是Vue實例的一個屬性，它是通過Vue.set方法實現的。Vue.set方法主要是將響應式對象上的屬性設置為新值。具體的源碼如下：

export function set (target: ArrayObject, 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方法的源碼實現主要有以下幾步：

• 通過判斷target的類型來避免傳入非法參數。
• 當target是一個數組的時候，我們可以通過splice方法來修改數組項，同時更改目標數組的長度。
• 當target是一個對象，并且key是對象上原有的屬性，則可以直接設置對象的屬性值。
• 當target沒有__ob__屬性的時候，可以通過直接設置屬性來實現屬性的添加。
• $set方法最后一步是通知Observer來更新視圖。