Vue from the use of the source code to achieve a detailed tutorial _javascript skills

Build the Environment

Project GitHub Address

The project involved the Json-server simulation get request, with the Vue-router;

About Vue life cycle and vue-router hook function detailed

Life cycle

1.0 version

1. Which life cycle interfaces

Init
Created
beforecompile
Compiled
Ready
attatched
Detached
destoryed

2. Order of execution

1. does not have keep-alive

Enter:

Init->create->beforecompile->complied->attatched->ready

Move out:

beforedestory->detached->destoryed;

2. With keep-alive

The first time

Enter:

Init->create->beforecompile->complied->attatched->ready

Move out:

Detached

Every time after that

Enter:

attatched

Move out:

Detached

hook function

3. What is the hook function?

Data
Activete
Deactivate
Canactivate
Candeactivate

4. Order of execution

Enter:

Canactivate->actiavte->date

Move out:

Candeactivate->deactiavte

Both appear together

5. For a component A with subassembly B, when this component A is moved in and out of operation, the lifecycle of the component to drink the order of the hook function is referenced as follows:

For example

A.vue

<div>
<B></B>
</div>

Note: The nested subassemblies are in parentheses below

1. Does not have keep-alive:

Move into:

1. canactivate;
2. Init;
3. Create;
4. Beforecompile;
5. (Nested subassembly: Init,create,beforecompile,compile);
6. Compile;
7. Activate;
8. Data;
9. Attached;
10. (subassembly attached);
11. (subassembly ready);
Ready;

Move out:

Candeactivate;
Deactivate;
Beforedestroy;
16. (subassembly Beforedestroy);
17. (subassembly destoryed);
detached;
19. (subassembly detached);
destoryed;

2. With keep-alive:

Move into:

1. canactivate;
2. Activate;
3. Data;
4. Attached;
5. (subassembly attached);

Move out:

6. Candeactivate;
7. Deactivate;
8. Detached;
9. (subassembly detached);

6. Hook function Activate and data execution order

Involves the hook function asynchronous resolve rule:

1. If the hook returns a Promise, then when the hook resolve depends on when the Promise resolve.

2. If the hook neither returns Promise nor any parameters, the hook will be synchronized resolve.

3. If the hook does not return Promise, but there is an argument (transition), the hook waits until Transition.next (), Transition.abort () or Transition.redirect () is invoked to Resolve

4. In the validation class hooks, such as canactivate,candeactivate and global Beforeeach hooks, if the return value is a Boolean value (Boolean), the hook is also synchronized resolve.

7. According to what can ensure that the interface has been updated to complete, that is, hanging in complete

Execution lifecycle attached description has been mounted

bidirectional binding and rendering mechanism

1. Monitoring and triggering of data (subscribe and publish observer)

SRC directory under Observer:

1. Array.js

2. Dep.js; (Implement a Publish subscription object)

3. Index.js (using the Object.defineproperty API and designing a special getter/setter for this attribute, and then triggering a function in the setter to achieve the listening effect);

The following is the source code for this section

Object.defineproperty (obj, key, {
enumerable:true,
configurable:true,
get:function reactivegetter () C4/>var value = getter? Getter.call (obj): Val
if (dep.target) {
dep.depend ()
if (childob) {
childOb.dep.depend ()
}
if (IsArray (value)) {for
(var e, i = 0, L = value.length i < l; i++) {
e = value[i]
e && e.__ob__ && e.__ob__.dep.depend ()}} return
value
},
set:function Reactivesetter (newval) {
var value = getter. Getter.call (obj): Val
if (newval = = value) {return
}
if (setter) {
setter.call (obj, newval)
} else {
val = newval
}
Childob = Observe (newval)
dep.notify ()
}
})

Simplify the above listening and triggering code as follows:

function Notidy (obj,key) {
Console.log (key+ "has changed");
Console.log (key+ "Now is:" +obj[key]);
}
function Todata (key,val) {
var ob=this;
Object.defineproperty (ob,key,{
enumerable:true,
configurable:true,
get:function () {return
val;
} ,
set:function (newval) {
if (newval==val) {return
;
}
Val=newval;
Notidy (This,key);}}
)
}

SRC directory under Directive.js

A series of parsed attributes can be seen in the directive, and directive instantiation can be seen in utils/lifecycle.js.

The following code is in the Directive.prototype._bind

var watcher = This._watcher = new Watcher (
THIS.VM,
this.expression,
this._update,//callback
{
Filters:this.filters,
TwoWay:this.twoWay,
deep:this.deep,
preprocess:preprocess,
postprocess: PostProcess,
scope:this._scope
}
)
//V-model with inital inline value need to sync back to
//M Odel instead of update to DOM on Init. They would
//set the Afterbind hook to indicate that.
if (this.afterbind) {
this.afterbind ()
} else if (this.update) {
this.update (watcher.value)
}
Directive.prototype.set = function (value) {/
* Istanbul Ignore Else *
/if (this.twoway) {
this._ Withlock (function () {
This._watcher.set (value)
})
} else if (Process.env.NODE_ENV!== ' production ') { C28/>warn (
' Directive.set () can be used inside TwoWay ' +
' directives. '
)
}
}

SRC directory under Watch.js:

From the following code you can find the Watcher object to implement the subscription through the ADDDEP method

WATCHER.PROTOTYPE.ADDDEP = function (DEP) {
var id = dep.id
if (!this.newdepids.has (ID)) {
This.newDepIds.add (ID)
This.newDeps.push (DEP)
if (!this.depids.has (ID)) {
dep.addsub (this)
}
}
}

2. Before saying so much about two-way binding, in fact this is also vue internal rendering mechanism, summed up as follows

1. Monitor data through observer and provide the ability to subscribe to changes in a data item

2. Parse the template into a document fragment and then parse the directive in it to get the data items and their update methods that each directive relies on. For example, after the v-text= "message" is parsed (here only for the schematic, the actual program logic will be more rigorous and complex): The dependent data item this. $data. message, and the corresponding view Update method node.textcontent = this.$ Data.message

3. By watcher the above two parts, that is, the directive in the data dependency on the corresponding data observer, so that when the data changes, it will trigger the observer, and then trigger dependent dependency Corresponding View Update method, Finally to achieve the original template associated effect.

How did 3.vue improve the v-for with the same data rendering error?

Rendering of arrays

The default ID for an array that does not use track-by to render the internal cache is the value of the array, meaning that if the same value exists in the array, the same fragement fragment is obtained by ID, and finally through the InsertBefore operation Dom because it is the same instance, So it will not take effect.

<div>
<ul id= ' Test ' >
<li id= ' child1 ' >child1</li>
<li id= ' child ' >child2 </li>
</ul>
</div>
<script>
_element1=document.getelementbyid (' child1 ') );
_element2=document.getelementbyid (' child2 ');
document.getElementById (' Test '). InsertBefore (_element1,_element2);
</script>

The result of rendering is child2 in front of Child1

The purpose of using track-by is to customize this internal ID so that several items with the same value in the array are not selected to the same instance, and there is a difference between using the track-by= ' $index ' or other uniquely differentiated ID values.

Using $index allows the reversed data to be moved without moving, and there is a corresponding move operation when the other ID is in a different order.

Rendering of objects

Objects typically use keys as IDs for internally cached objects, which can also be customized by track-by to improve performance.

Vm.model = {
A: {id:1, Val: "Model1"},
B: {id:2, Val: "Model2"},
C: {id:3, Val: "Model2"},
}

List update

Vm.model = {
D: {id:1, Val: "Model1"},
e: {id:2, Val: "Model2"},
f: {id:3, Val: "Model2"}
}

The above is a small set to introduce the Vue from the use of the source code to achieve a detailed tutorial, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!