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

This article mainly introduces "what is the core principle of Vue". In daily operation, I believe many people have doubts about the core principle of Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "what is the core principle of Vue?" Next, please follow the editor to study!

Object.defineProperty / / 1. Literal quantity definition let data = {name: 'aa'} data.name =' bb' / / in this case we do not know that the name attribute has changed / / 2. Object.defineProperty let data1 = {} Object.defineProperty (data1, 'name') {/ / the method called automatically when we access the name property of data1 / / and the return value of the get function is the value you get get () {console.log ('you accessed the name property of data1') return 'aa'} / / when we set the function called automatically when we modify the name property / / and the latest value of the property will be passed into set (newValue) {console.log ('you modified the latest value of the name property of data1' as an argument NewValue) / / this location will be executed as long as you modify the name property / / so if you want to do something of your own when the name changes, you can put it here to execute / / 1. Ajax () / 2. Operate a dom area}}) / / above is another scheme defined by the object in js. The corresponding function / / access property can be called automatically when accessing and setting properties: data.name data ['name'] / / set properties: data.name =' bb' data ['name'] =' bb'

Responsive core API

Get, set / / let data = {/ / name: 'aa' / /} let data = {} let _ name =' aa' Object.defineProperty (data, 'name', {get () {console.log (' you accessed the name property of data1') return _ name} Set (newValue) {console.log ('you modified the latest value of the name property of data1 to', newValue) _ name = newValue}) / / cause of the problem: a fixed value is returned directly in get, and the new value in the set function gets but does nothing / / solution: by declaring an intermediate variable Let return in the get function go out of this variable / and set the latest value to this intermediate variable in the set function, and the data reflects the effect of a / / data of a set and get operation to the view.

A change in the data can cause a change in the view (put the data in the corresponding position by operating dom). If the data changes, it will be replayed with the latest value of the data.

Option 1: imperative operation

1.document.querySelector ('# app'). InnerText = data.name

Re-execute document.querySelector ('# app') .innerText = data.name in the 2.set function

Scenario 2: declarative rendering

Implementation of v-text instruction

Core logic: find the element marked v-text through 'template compilation', and then put the corresponding data on it by manipulating domapi

1. Find all the child nodes (element nodes, text nodes, etc.) through the app root element. )-> dom.nodeChilds

two。 Filter out element node by node type (p)-> nodeType 1 element node 3 text node

3. Find the specific node that needs to be set through v-text

4. Find the element that is bound to the v-text tag and get all the attributes on it, id class vMurtext= "name".

5. Get the instruction type 'vmurtext' and get the attribute name' name''of the data to be bound through vMFT = "name".

6. Determine that it is a v-text instruction and then put the corresponding value of the name attribute on node.innerText = data [name] by operating domapi

The whole process can be called "template compilation".

The view change is reflected in the data input element v-model bidirectional binding M-> VV-> MM-> V

1. Find all the child nodes (element nodes, text nodes, etc.) through the app root element. )-> dom.nodeChilds

two。 Filter out element node by node type (p)-> nodeType 1 element node 3 text node

3. Find the specific node that needs to be set through v-text

4. Find the element that is bound to the v-text tag and get all the attributes on it, id class vMurtext= "name".

5. Get the instruction type 'vmurmodel' and get the attribute name of the data to be bound 'name'' through vMel model = "name"

6. Determine that it is a v-model instruction and then put the corresponding value of the name attribute on node.value = data [name] by operating domapi

The steps of v-model and v-text are exactly the same except that the instruction type is inconsistent and the dom api used is inconsistent.

V-> M

Essence: event listener takes the latest value entered in input in the callback function and assigns it to the bound property

Node.addEventListener ('input', (e) = > {data [name] = e.target.value})

The above summary:

1. Responsive form of data

two。 Data changes affect the view

3. View changes affect data

4. How instructions are implemented (regular implementation logic)

Optimization work:

1. General data responsive processing

Data () {return {name:'cp', age:28}}

Based on off-the-shelf data, and then processed into a responsive type

Object.keys (data) / / an array of key of all objects Object.keys (data) .forEach (key= > {/ / key attribute name / / data [key] attribute value / / data original object / / convert all key to the form defineReactive (data,key,data [key])} of get and set) function defineReactive (data,key,value) {Oject.defineProperty (data,key) {get () {return value}, set (newValue) {value = newValue}})}

two。 Publish and subscribe model

Question:

What I need to do after the name change is to update the two p tags, and now no matter which data you update, all the tags will be re-manipulated and cannot be updated accurately.

The way to solve the problem:

1. What is the most critical code after the data changes?

Node.innerText = data [name]

two。 Design a storage structure

Each responsive data may be bound by multiple tags is an one-to-many relationship.

{name: [() = > {node (p1). InnerText = data [name]}, () = > {node (p2). InnerText = data [name]}.]}

The problem solved by publish subscriptions (custom events) is the one-to-many problem.

Implement a simple publish and subscribe model:

Event model of browser

Dom.addEventLister ('click', () = > {})

As long as the click event is called, all bound callback functions execute what is clearly an one-to-many relationship

Const Dep = {map: {}, collect (eventName,fn) {/ / if the current event has never been collected, initialize it into an array if (! this.map [eventName]) {this.map [eventName] = []} / / add this.mapeventName] .push (fn)} directly to push if it has been initialized Trigger (eventName) {this.map.eventName] .forEach (fn= > fn ())}}

Optimize existing problems using the publish-subscribe model

In the previous writing, no matter which data has changed, we can rudely execute the compile function.

Now we finish the collection of update functions when the compile function is first executed, and then when the data changes.

Through the key of the data, we can find the corresponding update function and execute it in turn to achieve the effect of accurate update.

At this point, the study of "what is the core principle of Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.