Vue's responsive system is implemented through Object.defineProperty (Vue 2) or Proxy (Vue 3), and automatically updates the view when the data changes. 1. Observer converts data into responsiveness; 2. Dep collects watchers that rely on this data; 3. Watcher triggers updates when data changes. Responsive data must be declared in data(), props, computed, etc. Please avoid loss of responsiveness by array subscript assignment or new attributes of the object. You can use $set or reactive/ref to process it. Optimization methods include using computed cache, shallowReactive to avoid overresponsiveness, and reduce high-overhead operations in templates, thereby improving performance.

Vue's responsive system is one of the most core and critical parts of the Vue framework. It keeps data and views automatically synchronized, and you don't need to manually operate the DOM to update the interface. Simply put, when the data changes, the view that depends on this data will be automatically re-rendered .

How does responsive data work?

In Vue, the core mechanism of responsiveness is implemented through Object.defineProperty (Vue 2) or Proxy (Vue 3) . These mechanisms can monitor changes in object properties.

For example:

 data() {
  return {
    message: 'Hello Vue'
  }
}

When you use {{ message }} in a template, Vue will turn this variable into a "traceable" behind the scenes. Once you modify message in the code, for example:

 this.message = 'New Message'

Vue will know about this change and will only update the part of the view related to message .

Several key concepts of responsiveness

To understand Vue's responsive system, there are several terms you need to know:

• Observer : Responsible for converting data into responsive.
• Dep (Dependency Collector) : Each responsive attribute has a Dep to record which components or computed attributes depend on it.
• Watcher (subscriber) : represents a view part or computed attribute that needs to be updated. When the data changes, it will be notified to update.

The relationship between them is like this:

• When the component is rendered, a Watcher will be created;
• When a certain data is accessed during rendering, the Observer's get method will be triggered;
• Then Dep collects the current Watcher;
• When the data changes, Dep notifies all collected Watcher updates.

Which data is responsive? How to make sure the data is responsive?

In Vue, only data declared in specific places such as data() , props , computed , and setup() are responsive.

Several common precautions:

• ?Don’t write functions or Symbol types in data, Vue will not responsively process them.
• ? Directly assign values to the array, or add new attributes to the object, and no responsive updates will be triggered.

For example:

 this.items[0] = newItem // will not trigger update this.obj.newKey = 'value' // will not trigger update

At this time you should use:

 // Array replaces element this.$set(this.items, 0, newItem)

// Add the new attribute this.$set(this.obj, 'newKey', 'value')

Or in Vue 3, reactive() and ref() can be used to process more flexibly with Proxy.

How to optimize the performance problems caused by responsiveness?

Although responsiveness is very convenient, it is not at all cost. If your application is large or has many complex objects, it may bring some performance overhead.

The following points can be considered:

• ? Use computed attribute to cache complex logic and avoid repeated calculations.
• ? For large objects or data that do not require response, you can use shallowReactive() or markRaw() in the setup or composition API.
• ? A way to avoid frequent execution of high overhead in templates.

Basically that's it. Responsive systems look magical, but the principles behind them are not complicated. It’s just that Vue has encapsulated many details for you. Mastering its mechanism will allow you to write more efficient and controllable Vue applications.

The above is the detailed content of What is the Vue reactivity system. For more information, please follow other related articles on the PHP Chinese website!