How does Vue implement reactivity?

What is Reactivity?

Reactivity means: when data changes, the UI updates automatically. It is one of Vue's core features.

Vue 2: Object.defineProperty

Vue 2 uses Object.defineProperty to intercept get and set on object properties.

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      track() // collect dependencies
      return val
    },
    set(newVal) {
      val = newVal
      trigger() // notify updates
    }
  })
}

Vue 2 Limitations

• Cannot detect new properties: this.obj.newKey = value won't trigger updates — requires Vue.set()
• Cannot detect array index mutations: arr[0] = value won't trigger — requires this.$set() or array methods
• Deep nesting: Requires recursive traversal at initialization, which is slow

Vue 3: Proxy

Vue 3 uses ES6 Proxy to intercept the entire object, resolving all Vue 2 limitations.

const handler = {
  get(target, key) {
    track(target, key) // track dependency
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    Reflect.set(target, key, value)
    trigger(target, key) // trigger update
    return true
  },
  deleteProperty(target, key) {
    Reflect.deleteProperty(target, key)
    trigger(target, key)
    return true
  }
}

const reactive = (obj) => new Proxy(obj, handler)

Vue 3 Advantages

Feature	Vue 2 (defineProperty)	Vue 3 (Proxy)
New properties	❌ Requires Vue.set()	✅ Auto-detected
Property deletion	❌ Not detected	✅ Auto-detected
Array index	❌ Not detected	✅ Auto-detected
Map / Set	❌ Not supported	✅ Supported
Init performance	Slow (recursive)	Fast (lazy proxy)