vue.set（或this。$ set）和直接分配有什么区别？

在Vue 2中，直接赋值无法触发响应式更新，而Vue.set或this.$set能确保新增属性或数组项被正确侦测并更新视图；2. Vue 3使用Proxy实现了全面的响应式监听，支持动态添加属性和数组索引修改，因此直接赋值即可触发更新，无需使用$set；3. 尽管$set在Vue 3中仍存在以兼容旧代码，但已被弃用，推荐优先使用直接赋值或替换整个对象/数组的方式以保证响应性，该方案在两个版本中均有效。

The key difference between Vue.set (or this.$set) and direct assignment lies in reactivity — specifically, whether Vue can detect changes to your data and trigger updates in the UI.

1. Reactivity Limitations in Vue 2

In Vue 2, JavaScript’s Object.defineProperty() is used to make data reactive. However, it has limitations — it cannot detect:

• Adding new properties to an object that didn’t exist when the component was created.
• Modifying array items by index (e.g., arr[0] = newValue).
• Adding properties to an array using the index.

For example:

// This won't trigger a view update in Vue 2
this.someObject.newProperty = 'hello'

Even though the property is added, Vue doesn’t know about it, so the view won’t re-render.

? That’s where Vue.set or this.$set comes in.

2. What Vue.set or this.$set Does

Vue.set(target, key, value) or this.$set(target, key, value) explicitly adds a reactive property to an object or array. It ensures the new property is observable and triggers reactivity.

Syntax:

this.$set(this.someObject, 'newProperty', 'hello')

This is equivalent to:

Vue.set(this.someObject, 'newProperty', 'hello')

✅ This will trigger a view update because Vue now tracks the new property.

3. When You Need $set vs. Direct Assignment

Examples:

? Doesn't work (Vue 2):

this.items[0] = { id: 1, text: 'updated' } // No reactivity
this.user.age = 25 // If `age` didn't exist initially

✅ Correct way (Vue 2):

this.$set(this.items, 0, { id: 1, text: 'updated' })
this.$set(this.user, 'age', 25)

Alternatively, replace the whole object/array:

this.items = this.items.map(...) // Triggers reactivity
this.user = { ...this.user, age: 25 }

4. Vue 3 Changes the Game

In Vue 3, reactivity is based on JavaScript Proxy, which can detect additions and deletions of object properties.

So in Vue 3:

this.someObject.newProperty = 'hello' // ✅ Works! Reactive.

? You don’t need Vue.set or this.$set in most cases in Vue 3 — direct assignment works.

However, $set still exists for backwards compatibility, but it’s deprecated and not recommended in new code.

Summary

• In Vue 2: Use this.$set when adding new properties or modifying arrays by index, because direct assignment won’t trigger reactivity.
• In Vue 3: Direct assignment works fine for most cases thanks to Proxy. $set is unnecessary and discouraged.
• Always prefer replacing the entire object/array when possible — it's often cleaner and reactive in both versions.

Basically:
$set was a workaround for Vue 2’s reactivity limits — Vue 3 fixed those, so it's largely obsolete now.

以上是vue.set（或this。$ set）和直接分配有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！