VUE feature 1: data bidirectional binding

VUE is a kind of MVVM development mode. One of the important characteristics of VUE, which is different from React and other front-end frameworks, is that VUE realizes the bidirectional binding of data and view.

1, Two way binding PK:

If you want to realize the two-way binding of an input box for inputting specific information, the traditional approach and the example under the VUE framework:

<!DOCTYPE html>
<html>
<head>
    <title>Data bidirectional binding implementation</title>
    <meta charset="UTF-8">
    <script src="vue.js"></script> // Introduce the vue module. The source official website has a download address. The portal is https://cn.vuejs.org/v2/guide/installation.html
</head>
<body>
    <div id="traditionalDemo">
        //Unframed Demo<input id="city" value="YueYang"/>
        <div id="debug">YueYang</div>
    </div>
    <div id="vueDemo">
        VUE   Demo<input v-model="city"/>
        <div>{{city}}</div>
    </div>
<script>
// js example under non framework
let cityDom = document.getElementById('city')
let debugDom = document.getElementById('debug')    
// Method 1: store the data in a variable of string type
// let city = 'YueYang'
// cityDom.value = city
// debugDom.innerHTML = city
// cityDom.oninput = function(e){ 
//   city = e.target.value
//   cityDom.value = city
//   debugDom.innerHTML = city
// }
// Method 2: usually we store this data together with other data in the object
let msg = {}
// Defining object properties through storage descriptors
Object.defineProperty(msg, 'city', {
    set: function(val){
        cityDom.value = val
        debugDom.innerHTML = val
    },
    enumerable: true,
    configurable: true   
})
// Defining object properties through data descriptors
// Object.defineProperty(msg, 'city',{
//     value: 'Yue Yang',
//     writable: true´╝î
//     enumerable: true,
//     configurable: true
// })
// Defining objects and object attributes in literal form
// let msg = {
//     city: 'Yue Yang'
// }
cityDom.oninput=function(e){ 
  msg.city = e.target.value
}


// Vue js example
new Vue({
 el:'#vueDemo',
 data:{
   city: 'YueYang'
 }
})



</script>
</body>
</html>

2, Analysis of the principle of data bidirectional binding implemented by VUE

The idea of bi-directional data binding: update the view after the data changes, and update the data after the view changes.
View change update data

cityDom.oninput=function(e){ 
  msg.city = e.target.value
}

As can be seen from the non framework js code in the above example, you can trigger the relevant events of the view (oninput, onchange, onblur...) Update data.
Data change update view

Object.defineProperty(msg, 'city', {
    set: function(val){
        cityDom.value = val
        debugDom.innerHTML = val
    },
    enumerable: true,
    configurable: true
})

From the non framework js code in the above example, we can see that after the data changes, the view can be updated through the set method of the attribute.

VUE adopts publish and subscribe mode to realize bidirectional binding of view and data, mainly including the following functional modules:
Listener: it is responsible for listening for changes of all object properties. In fact, the core method is the Object.defineProperty() used earlier. By recursively traversing all attribute values, and defining their attributes, we can monitor all attributes.

Message subscriber (Dep): it is mainly responsible for collecting subscribers, and then executing the update function of corresponding subscribers when the property changes.

Compile r: it is mainly responsible for parsing the template instructions and replacing the template data, initializing the view, binding the node corresponding to the template instructions to the corresponding update function, and initializing the corresponding subscriber.

Watcher: responsible for receiving notification of property changes and performing corresponding functions, and then updating the view.

Published 6 original articles, won praise 0, visited 4886
Private letter follow

Tags: Vue Attribute React

Posted on Tue, 10 Mar 2020 20:49:40 -0700 by Belleanme