Getter-Setter Reactivity

## How Vue 2 made data reactive When a Vue 2 component was created, Vue took the object returned by `data()` and **walked it recursively**. For every property that existed at that moment it called `Object.defineProperty` to replace the plain value with an **accessor pair**: - the **getter** recorded which watcher was reading the value (the component's render watcher, a `computed`, a `watch`) and added it to that key's dependency list; - the **setter** stored the new value and **notified** every recorded watcher, which queued a re-render. Each observed object also carried a hidden observer (`__ob__`) holding an **object-level dependency list**, so a watcher that read `this.user` was subscribed both to the `user` key and to the `user` object as a whole. That second list matters for the fix below. The crucial property of this design: conversion happened **once, for the keys that existed**. The ES5 feature set Vue 2 targeted offered no way to intercept the *creation* of a property that did not exist yet. ## Why the new key was invisible ```js export default { data() { return { user: { name: 'Ann' } } }, methods: { addNickname() { this.user.nickname = 'Ace' // plain property: no setter, no notification } } } ``` `nickname` is created as an ordinary data property. The assignment succeeds and the value is really there, but no setter ran, so no watcher was queued. A template showing `{{ user.nickname }}` keeps its old output **until something unrelated re-renders the component** (typing in another field, a prop change), and then the value suddenly appears. That delay is why the bug is so often reported as intermittent, or as "it updates when I click somewhere else". Removing a key with `delete this.user.nickname` had the mirror-image problem: the key vanished without anyone being told. Typical symptoms when you meet it in an old codebase: - the value is correct in the console or in Vue Devtools, but the screen is stale; - it shows up after an unrelated interaction; - the key is missing from the object's initial shape in `data()`. ## What Vue.set and Vue.delete did `Vue.set(target, key, value)` (instance alias `this.$set`) did what a plain assignment could not: 1. If the key already existed on the object, it simply assigned it, so the existing setter fired. 2. Otherwise it installed a reactive getter/setter for the new key. 3. It then notified the object's **object-level** dependency list, so every watcher that had read the parent object re-ran and picked up the new key. `Vue.delete(target, key)` (`this.$delete`) deleted the key and notified the same list. On arrays both helpers used `splice` under the hood. Two limits applied: they refused to add reactive keys to a component instance or to its root `data` object (root keys had to be declared in `data`), and on a plain object Vue had never observed they just assigned or deleted without notifying anyone. ## The three fixes, compared | Fix | Example | When it fits | |---|---|---| | `Vue.set` / `this.$set` | `this.$set(this.user, 'nickname', 'Ace')` | The key is genuinely dynamic, such as user-defined fields or map-like objects | | Declare the key up front | `user: { name: 'Ann', nickname: null }` | The shape is known in advance; simplest and self-documenting | | Replace the object | `this.user = { ...this.user, nickname: 'Ace' }` | Adding several keys at once; the `user` setter fires and the new object is converted | A common half-fix is `Object.assign(this.user, { nickname: 'Ace' })`: it mutates the same object, so no setter sees a change and the new key is still plain. Assigning into a **fresh** object is what makes the replacement approach work. ## What changed in Vue 3 Vue 3 makes `data()` and `reactive()` state reactive with **Proxies**, which intercept writes to keys that do not exist yet as well as `delete`. The plain assignment in the example now updates the view, so `Vue.set`, `Vue.delete`, `vm.$set` and `vm.$delete` were **removed** as no longer needed. The migration build (`@vue/compat`) keeps them as plain assignments or deletions that log a deprecation warning. When you meet this bug today it is in a Vue 2 codebase, including Vue 2.7: 2.7 backported the Composition API but kept the getter/setter engine and its caveats.