Two-way binding
Vue's two-way binding is achieved through data hijacking and publish-subscribe mode.
When the Vue instance is initialized, it uses the () method for data hijacking for each property in the data option. In this way, when the data changes, the setter function is triggered to notify view updates that depend on the property.
Vue, on the other hand, also maintains a subscriber list that collects all Watcher objects that depend on this property. When the data changes, Dep (Subscriber List) will notify all Watcher objects, and then the Watcher object will trigger the corresponding view update.
This way of implementing bidirectional binding through getters and setters is called a responsive system, which can make it easier for developers to handle the relationship between data and views.
Example
Vue's two-way binding is achieved through data hijacking and publish-subscribe mode. Here is a simple example that demonstrates how to implement two-way binding using Vue:
HTML code:
<div >
<input v-model="message" />
<p>{{ message }}</p>
</div>
JavaScript code:
var app = new Vue({
el: '#app',
data: {
message: '',
},
});
In the above code, we will<input>The value of the element (i.e.message) bound to Vue instancedataIn the objectmessageAttributes. When the user is<input>Vue will automatically update when entering text in the boxmessageThe value of the attribute is updated to the bound<p>The content of the element.
How does Vue achieve this two-way binding? Vue internally hijacks (i.e. intercepts) each bound data attribute. When the attribute changes, Vue will automatically notify all components or directives that rely on the attribute to update. In the above example, Vue listensmessageChanges in attributes and in<input>The latest one is displayed in the boxmessagevalue.
vue3 two-way binding
The bidirectional binding principle of Vue3 is implemented based on the Proxy object of ES6. In Vue3, each component has a rendering function that returns a virtual DOM tree. When component data changes, Vue3 will use the Proxy object to proxy the data object and listen to the changes in the data object, thereby achieving responsive updates.
Specifically, when we use the v-model directive in a template, Vue3 will automatically generate a binding object for it. This binding object contains a value property and an update method. The value attribute is used to save the value of the input box, and the update method is responsible for assigning the new value to the value attribute. At the same time, this binding object will also proxy the properties in data through the Proxy object, and call the update method to update the view when the property value changes.
Overall, the two-way binding principle of Vue3 can be summarized into the following steps:
- Create a Proxy object when the component is rendered, proxying the data.
- Listen to the get and set operations of the Proxy object, triggering updates when needed.
- When the user enters content in the input box, since the v-model directive binds the value attribute of the bound object, the set operation of the Proxy object will be triggered, causing the data to be updated and notified of the view to be updated.
- When the data changes, the Proxy object will trigger a get operation. After detecting the data changes, the update method is called to update the value attribute of the bound object, thereby realizing the update of the view.
In short, Vue3's two-way binding principle is implemented based on ES6 Proxy objects. By listening to get and set operations, the view is automatically updated when data changes, thereby achieving responsive updates. This mechanism allows developers to manage the relationship between data and views more easily, improving development efficiency and code maintainability.
This is the article about the principle and implementation method of Vue two-way binding. For more related Vue two-way binding content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!