Vue responsive data principle and the difference between Vue.set and Vue.$set

Vue is a popular development framework in the current front-end field. One of its core mechanisms that can trigger view updates through data modification is responsive data. This article will delve into the principles of Vue's reactive data and explore the differences between Vue.set and Vue.$set.

1. Vue responsive data principle

Vue will first hijack the data source. To define the data source, it only needs to meet the following three conditions: the object is not empty, and the object is not a frozen or sealed object. , the object is not the Vue instance itself. When the required object meets the conditions, Vue will add an Observe instance to the object. The Observe instance will add a Dep instance to each property of the object. When the property value is an object, the Dep instance of the property will be its Dep instance. Add a Dep instance for each value. This enables binding of properties.

When modifying the data in the Vue instance, Vue will intercept the read and write operations of the data through getters and setters, thereby triggering the update of the property value. The setter operation will notify the Dep instance to which the property belongs to update the notification. This triggers a view update. This is how Vue implements responsive data.

2. The difference between Vue.set and Vue.$set

In Vue, we often modify the data in data and bind it to the view through v-model, so that in When data is modified, Vue can automatically update the view. But when modifying object data, we need to use the Vue.set or Vue.$set method provided by Vue to achieve responsive data updates.

The usage of Vue.set and Vue.$set are consistent. The target of Vue.set(target, key, value) is the object you want to modify, key is the object as an attribute name, and value is the attribute value. When using Vue.set, Vue will add a new attribute on the object, which is named key and whose value is value.

Vue.$set(target, key, value) is also used to modify the attribute value of the object, but the difference between Vue.$set and Vue.set is that Vue.$set will determine whether the object is a response If it is not responsive, Vue.$set will convert the object into a responsive object. This ensures that the object can trigger view updates normally.

It should be noted that when we modify the object data, if we directly use obj.property = value to modify it, Vue will not detect the change in this data and will not trigger a view update. Therefore, when modifying data of an object type, be sure to use the Vue.set or Vue.$set method to do so.

The above is the detailed content of Vue responsive data principle and the difference between Vue.set and Vue.$set. For more information, please follow other related articles on the PHP Chinese website!