Shulou(Shulou.com)06/02 Report--

This article introduces you how to deeply understand v-model in vue. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

First of all, we need to understand the purpose of learning v-model.

V-model on a component takes advantage of a prop named value and an event named input by default, but input controls such as checkboxes and checkboxes may use value attribute for different purposes. The model option can be used to avoid such conflicts-this is the answer found on the vue website.

Secondly, we need to know the nature of v-model and what is its implementation principle.

In my opinion, v-model itself is a syntax sugar, which actually provides us with a built-in instruction for vue, which not only simplifies our code but also makes us understand how to use this command.

Using the v-model command allows us to directly get the content we entered in the input box, and save the input to our data data. When the value of input changes, the data data will be automatically updated and the corresponding view will be updated and rendered.

{{model}}

Export default {data () {return {model:'',}},}

The principle of bi-directional binding MVVM is to listen to the data and update the page view when the data changes.

MVVM flow chart

The following figure is the principle of two-way binding, listening to our data update view through the step-by-step process through data hijacking and template parsing.

Code related to Observer data hijacking

Observer is actually an observer who listens to every item in our data data through a loop. When the data data changes, it sends updates to the subscriber through the notify method, while Compile compiles our text so as to update part of the view.

Class Observe {constructor (vm) {this.walk (vm.data)} / / Loop traversal causes every key in the data to listen to walk (data) {Object.keys (data). ForEach (key = > {this.defineReactive (data, key, data [key])})} / / defines the response. This function is also the core function of the response defineReactive (data, key). Value) {let dep = new Dep () Object.defineProperty (data, key, {get () {console.log ('trigger get collection dependency') / / collect dependent if (Dep.target) {/ / add subscriber dep.addSub (Dep.target)} return value}, set (newValue) {console.log (value, 'trigger set to dispatch updates') / / the new value overrides the old value value = newValue / / dispatch update dep.notify ()},})}}

Watcher view update

Watcher is our subscriber, updating the view through the update method

Constructor (vm, exp, cb) {this.vm = vm; this.exp = exp; this.cb = cb This.value = this.get ()} / / Update update () {this.run ()} / / Update DOM run () {const value = this.get () / / compare if (value! = = this.value) {/ / call the callback function this.cb.call (this.vm) Value)}} / / Collection depends on get () {Dep.target = this let value = this.vm.data [this.exp] Dep.target = null Return value}} on how to in-depth understanding of the v-model in vue to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.