royluck

前端開發(fā)代碼規(guī)范[https://gitee.com/royluck/nuxt-lovery/blob/master/_%E5%89%8D%E7%AB%AF%E5%BC%80...

royluck

最近測(cè)試將Blazor部署到Docker鏡像构灸，并使用Nginx進(jìn)行集成上渴，部署看上去沒有問題，可在瀏覽器控制臺(tái)發(fā)現(xiàn)如下問題：Error: Failed to start the...

royluck

- 轉(zhuǎn)換數(shù)據(jù) - 雙向綁定 Props或者Vuex - 日期合并拆分

royluck

抓住數(shù)據(jù)的小尾巴 - JS浮點(diǎn)數(shù)陷阱及解法[https://zhuanlan.zhihu.com/p/30703042]

royluck

@羋渡 好久寫的代碼喜颁，index 應(yīng)該是需要處理的對(duì)象所在的index

Vue項(xiàng)目解決蘋果手機(jī)拍照上傳圖片翻轉(zhuǎn)問題

在項(xiàng)目中稠氮，這里用到了input type="file"方式上傳圖片 在項(xiàng)目測(cè)試中發(fā)現(xiàn)，使用蘋果手機(jī)點(diǎn)擊input標(biāo)簽直接調(diào)用相機(jī)功能上傳照片（從相冊(cè)選擇圖片上傳則正常）半开，卻發(fā)...

royluck

5987 7 1

royluck ·

1. 計(jì)算屬性初始化時(shí)創(chuàng)建計(jì)算watcher并保存至實(shí)例的_computedWatchers中隔披，由于lazy為true，get函數(shù)沒有執(zhí)行寂拆，所以value為undefined
2. 模板解析到對(duì)應(yīng)的計(jì)算屬性時(shí)奢米，創(chuàng)建渲染watcher對(duì)象，由于lazy為false纠永，所以會(huì)在構(gòu)造器中執(zhí)行g(shù)et函數(shù)
3. 在get函數(shù)中鬓长，先將當(dāng)前渲染watcher對(duì)象入棧（pushTarget），然后執(zhí)行計(jì)算屬性對(duì)應(yīng)的getter函數(shù)
4. 此時(shí)的getter函數(shù)即為計(jì)算屬性初始化時(shí)創(chuàng)建的getter（computedGetter）渺蒿，然后取出第一步中放入_computedWatchers數(shù)組中的watcher痢士，判斷到dirty為true彪薛，執(zhí)行其evaluate方法
5. 在evaluate方法內(nèi)調(diào)用到get函數(shù)茂装，此時(shí)再將當(dāng)前的計(jì)算watcher入棧（pushTarget）怠蹂，然后執(zhí)行g(shù)etter函數(shù)（此getter函數(shù)為創(chuàng)建計(jì)算watcher對(duì)象時(shí)傳入的getter，即用戶定義的計(jì)算屬性對(duì)應(yīng)的get函數(shù)）少态，getter函數(shù)執(zhí)行的過程即為依賴收集的過程城侧，一個(gè)或多個(gè)dep會(huì)保存到該watcher對(duì)象的newDeps數(shù)組中（watcher和dep會(huì)互相持有對(duì)方的引用）。完成后將計(jì)算watcher出棧（popTarget）彼妻，所以此時(shí)的Dep.target變回渲染watcher嫌佑。然后執(zhí)行cleanupDeps函數(shù)，將newDeps的數(shù)據(jù)移動(dòng)到deps中侨歉，最后將dirty置為false
6. 繼續(xù)向下執(zhí)行屋摇，執(zhí)行計(jì)算watcher的depend函數(shù)，這里設(shè)計(jì)的很巧妙幽邓，depend函數(shù)內(nèi)部會(huì)遍歷上一步得到的deps數(shù)組炮温，然后對(duì)其依次執(zhí)行dep.depend函數(shù)，而dep對(duì)象內(nèi)部則會(huì)將Dep.target(渲染watcher)添加到當(dāng)前dep對(duì)象中牵舵，相當(dāng)于是幫助渲染watcher收集了依賴柒啤。然后渲染watcher出棧，執(zhí)行cleanupDeps函數(shù)畸颅，此時(shí)Dep.target為undefined
7. 最后會(huì)返回計(jì)算watcher對(duì)象的value屬性担巩，這個(gè)值即為computed屬性對(duì)應(yīng)的緩存，在dirty為false時(shí)會(huì)直接返回該值
8. 舉個(gè)例子没炒，假如現(xiàn)在定義一個(gè)計(jì)算屬性fullname(){return this.firstname + this.lastname}涛癌，當(dāng)this.firstname有更新時(shí)，會(huì)執(zhí)行該屬性對(duì)應(yīng)的dep對(duì)象的notify方法送火，即遍歷subs數(shù)組內(nèi)的watcher執(zhí)行其update方法祖很，經(jīng)過前面的分析，subs數(shù)組內(nèi)的watcher對(duì)象至少有兩個(gè)漾脂，即計(jì)算watcher和渲染watcher假颇。所以計(jì)算watcher會(huì)將dirty置為true，然后渲染watcher會(huì)再次執(zhí)行到evaluate函數(shù)刷新計(jì)算屬性的值骨稿，并更新視圖
9. 如果沒有在模板中使用笨鸡，直接在JS代碼中使用，雖然第一次使用時(shí)會(huì)進(jìn)行value求值坦冠，但后續(xù)的使用就會(huì)直接使用value緩存形耗，如果完全沒使用到計(jì)算屬性，那么它的值就一直是undefined辙浑，這就是它相比methods優(yōu)秀的地方

逮蝦專業(yè)戶 評(píng)論自關(guān)于computed源碼

royluck

使用JS獲取當(dāng)前頁面的URL(網(wǎng)址信息)[https://blog.csdn.net/u013288800/article/details/82787641]