搭建環(huán)境

項目github地址

項目中涉及了json-server模擬get請求，用了vue-router；

關(guān)于Vue生命周期以及vue-router鉤子函數(shù)詳解

生命周期

1.0版本

1.哪些生命周期接口

initCreatedbeforeCompileCompiledReadyAttatchedDetachedbeforeDestorydestoryed

2.執(zhí)行順序

1. 不具有keep-alive

進入：

init->create->beforeCompile->complied->attatched->ready

移出：

beforeDestory->detached->destoryed;

2. 具有keep-alive

第一次的時候

進入：

init->create->beforeCompile->complied->attatched->ready

移出：

detached；

之后的每次

進入：

attatched

移出：

detached

鉤子函數(shù)

3.鉤子函數(shù)有哪些

data
activete
deactivate
canactivate
candeactivate

4.執(zhí)行順序

進入：

canactivate->actiavte->date

移出：

candeactivate->deactiavte

兩者一起出現(xiàn)

5.對于一個組件A里面有子組件B，當(dāng)這個組件A進行移入和移出操作時，組件之間的生命周期喝鉤子函數(shù)的執(zhí)行順序參考如下：

例如

A.vue

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

備注：下面括號里的是嵌套的子組件

1. 不具有keep-alive：

移入：

1. canActivate;
2. init;
3. create;
4. beforeCompile;
5. (嵌套子組件：init,create,beforeCompile,compile);
6. compile;
7. activate;
8. data;
9. attached;
10. (子組件attached);
11. (子組件ready);
12. ready;

移出：

13. canDeactivate;
14. deactivate;
15. beforeDestroy;
16. (子組件beforeDestroy);
17. (子組件destoryed);
18. detached;
19. (子組件detached);
20. destoryed;

2. 具有keep-alive：

移入：

1. canActivate;
2. activate;
3. data;
4. attached;
5. (子組件attached);

移出：

6. canDeactivate;
7. deactivate;
8. detached;
9. (子組件detached);

6.鉤子函數(shù)activate和data的執(zhí)行順序

涉及鉤子函數(shù)異步 resolve 規(guī)則：

1.如果鉤子返回一個 Promise，則鉤子何時 resolve 取決于該 Promise 何時 resolve。

2.如果鉤子既不返回 Promise，也沒有任何參數(shù)，則該鉤子將被同步 resolve。

3.如果鉤子不返回 Promise，但是有一個參數(shù)(transition)，則鉤子會等到transition.next(),transition.abort()或是transition.redirect()之一被調(diào)用才 resolve。

4.在驗證類的鉤子，比如canActivate,canDeactivate以及全局 beforeEach 鉤子中，如果返回值是一個布爾值 (Boolean)，也會使得鉤子同步 resolve。

7.根據(jù)什么可以確保界面已經(jīng)更新完成，也就是說掛在完成

執(zhí)行生命周期attached說明已掛載

雙向綁定與渲染機制

1.數(shù)據(jù)的監(jiān)聽和觸發(fā)（訂閱和發(fā)布observer）

src目錄下observer:

1. array.js

2. dep.js;(實現(xiàn)一個發(fā)布訂閱對象）

3. index.js；（利用Object.defineProperty這個API，并為此屬性設(shè)計一個特殊的 getter/setter，然后在 setter 里觸發(fā)一個函數(shù)，達到監(jiān)聽的效果）；

下面是這部分的源碼

Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {var value = getter ? getter.call(obj) : valif (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) : valif (newVal === value) {return}if (setter) {setter.call(obj, newVal)} else {val = newVal}childOb = observe(newVal)dep.notify()}})

簡化上面的監(jiān)聽與觸發(fā)代碼如下：

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目錄下directive.js

在directive中可以看到一系列解析出來的屬性，而directive的實例化可以在utils/lifecycle.js中看到。

下面這段代碼在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// model 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') {warn('Directive.set() can only be used inside twoWay' +'directives.')}}

src目錄下Watch.js:

從下面的代碼可以找到watcher對象通過addDep方法實現(xiàn)訂閱

Watcher.prototype.addDep = function (dep) {var id = dep.idif (!this.newDepIds.has(id)) {this.newDepIds.add(id)this.newDeps.push(dep)if (!this.depIds.has(id)) {dep.addSub(this)}}}

2.前面說那么多關(guān)于雙向綁定，其實這也是VUE內(nèi)部的渲染機制，總結(jié)如下

1. 通過 observer 對 data 進行了監(jiān)聽，并且提供訂閱某個數(shù)據(jù)項的變化的能力

2. 把 template 解析成一段 document fragment，然后解析其中的 directive，得到每一個 directive 所依賴的數(shù)據(jù)項及其更新方法。比如 v-text="message" 被解析之后 (這里僅作示意，實際程序邏輯會更嚴謹而復(fù)雜)：所依賴的數(shù)據(jù)項this.$data.message，以及相應(yīng)的視圖更新方法 node.textContent = this.$data.message

3. 通過 watcher 把上述兩部分結(jié)合起來，即把 directive 中的數(shù)據(jù)依賴訂閱在對應(yīng)數(shù)據(jù)的 observer 上，這樣當(dāng)數(shù)據(jù)變化的時候，就會觸發(fā) observer，進而觸發(fā)相關(guān)依賴對應(yīng)的視圖更新方法，最后達到模板原本的關(guān)聯(lián)效果。

3.vue是如何改進了v-for具有相同數(shù)據(jù)渲染出錯的？

數(shù)組的渲染

未使用track-by的數(shù)組渲染內(nèi)部緩存的默認id是數(shù)組的值value，意味著如果數(shù)組中存在相同的值，通過id獲取的是相同的一個fragement片段，最后通過insertBefore操作DOM由于是相同的一個實例，故不會生效。

<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>

渲染的結(jié)果是child2在child1前面

使用track-by目的是自定義這個內(nèi)部的id，使得數(shù)組中具有相同的值的幾項都不會選擇到相同的實例，對于使用track-by='$index'還是其他唯一區(qū)分的id值有一定的區(qū)別，各有好處。

使用$index使得反轉(zhuǎn)的數(shù)據(jù)沒有移動操作，而對于使用其他的id在順序不一樣的時候會有相應(yīng)的移動操作。

對象的渲染

對象一般使用鍵作為內(nèi)部緩存對象的id，通過track-by也可以自定義這個id提高性能。

vm.model = {a: { id: 1, val: "model1"},b: { id: 2, val: "model2"},c: { id: 3, val: "model2"},}

列表更新

vm.model = {d: { id: 1, val: "model1"},e: { id: 2, val: "model2"},f: { id: 3, val: "model2"}}

以上所述是小編給大家介紹的vue從使用到源碼實現(xiàn)教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！