Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to achieve responsive and two-way data in vue". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve responsive and two-way data in vue" can help you solve your doubts.

What is the vue- response?

One of the most unique features of Vue is its non-invasive responsive system. The data model is just a normal JavaScript object. When you modify them, the view is updated. This makes state management very simple and straightforward, but it is also important to understand how it works so that you can avoid some common problems. In this chapter, we will study

The underlying details of the Vue responsive system.

How is the vue- response implemented?

Data response: the data model is only an ordinary JavaScript object, but when we modify the data, the view will be updated to avoid frequent DOM operations and improve development efficiency. Unlike Jquery, Jquery operates Dom frequently.

Understanding of two-way data binding

The data changes, the view changes, the data changes (through this sentence, we can see that the data response is included in the two-way binding)

We can use v-model to create two-way data binding on form elements

Data driven is one of the most unique features of Vue

In the development process, you only need to focus on the data itself, not how the data is rendered into the view. Mainstream MVVM frameworks have implemented data responsive and bi-directional binding, so you can bind data to DOM.

In vue.js, the so-called data-driven means that when the data changes, the user interface changes accordingly, and the developer does not need to modify the dom manually.

Understanding of data-driven:

So how does vuejs implement this data-driven approach?

Vue implements two-way data binding mainly by using data hijacking combined with publisher-subscriber mode, hijacking the setter,getter of each attribute through Object.defineProperty (), publishing messages to subscribers when data changes, and triggering corresponding monitoring callbacks. When a normal Javascript object is passed to a Vue instance as its data option, Vue iterates over its properties and converts them to getter/setter with Object.defineProperty. Users do not see the getter/setter, but internally they let Vue track dependencies, notifying them of changes when properties are accessed and modified.

Two-way data binding of vue

Take MVVM as the entry point of data binding, integrate Observer,Compile and Watcher, monitor the data changes of your model through Observer, parse and compile template instructions through Compile (used to parse {{}} in vue), and finally use watcher to build a communication bridge between observer and Compile to achieve data change-> view update; view interaction change (input)-> data model change bi-directional binding effect.

Analysis of vue- two-way data? / v-model the principle of bidirectional data binding

The code is as follows (example):

/ / Object uppercase and lowercase value let data = {name:'Li Bai', age: 18} Object.keys (data) .forEach (key = > {defineReactiveProperty (data, key, data [key])}) function defineReactiveProperty (data, key, value) {Object.defineProperty (data, key, {/ / get () {return value}) / / set assign set (newVaue) {if (newVaue = value) {return} value = newVaue compine ()}} compine () function compine () {/ / get all child elements const nodes = document.querySelector under app through document.querySelect ('# app') .childNodes ('# app'). ChildNodes / / output this value. The current value is a hierarchical nested array. We use foreach / / console.log (nodes) nodes.forEach (item = > {/ / output again that item html:49 is an input input box / / console.log (item) / / to filter out the current tag. Because the output of nodes will put the space as' text' nodeType 3'. While the tag nodetype is 1Jer if to judge and filter out the if (item.nodeType = 1) {const attrs = item.attributes / / console.log (attrs) {0: type, 1: v-model, type: type, v-model: v-model, length: 2} returns an array Array.from (attrs). ForEach (arr = > {/ / console.log (arr) / / texgt= 'text' v-mode:' name' Filter out this v-model if (arr.nodeName = ='v arr.nodeValue model') {item.value = data [arr.nodeValue] item.addEventListener ('input' E = > {console.log (e.target.value) / / data [arr.nodeValue] = e.target.value})})} read here This article "how to achieve responsive and two-way data in vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.