1.vueä¸keyçåç
2.c++ splice 使ç¨
3.Vue2剥丝抽茧-响应式系统之set和delete
vueä¸keyçåç
ä¸ãKeyæ¯ä»ä¹
å¼å§ä¹åï¼æ们å è¿å两个å®é å·¥ä½åºæ¯
å½æ们å¨ä½¿ç¨v-foræ¶ï¼éè¦ç»åå å ä¸key
<ul><liv-for="iteminitems":key="item.id">...</li></ul>ç¨+newDate()çæçæ¶é´æ³ä½ä¸ºkeyï¼æå¨å¼ºå¶è§¦åéæ°æ¸²æ
<Comp:key="+newDate()"/>é£ä¹è¿èåçé»è¾æ¯ä»ä¹ï¼keyçä½ç¨åæ¯ä»ä¹ï¼ä¸å¥è¯æ¥è®²keyæ¯ç»æ¯ä¸ä¸ªvnodeçå¯ä¸idï¼ä¹æ¯diffçä¸ç§ä¼åçç¥ï¼å¯ä»¥æ ¹æ®keyï¼æ´åç¡®ï¼æ´å¿«çæ¾å°å¯¹åºçvnodeèç¹
åºæ¯èåçé»è¾å½æ们å¨ä½¿ç¨v-foræ¶ï¼éè¦ç»åå å ä¸key
å¦æä¸ç¨keyï¼Vueä¼éç¨å°±å°å¤å°ååï¼æå°åelementç移å¨ï¼å¹¶ä¸ä¼å°è¯å°½æ大ç¨åº¦å¨åéå½çå°æ¹å¯¹ç¸åç±»åçelementï¼åpatchæè reuseã
å¦æ使ç¨äºkeyï¼Vueä¼æ ¹æ®keysç顺åºè®°å½elementï¼æ¾ç»æ¥æäºkeyçelementå¦æä¸ååºç°çè¯ï¼ä¼è¢«ç´æ¥removeæè destoryedç¨+newDate()çæçæ¶é´æ³ä½ä¸ºkeyï¼æå¨å¼ºå¶è§¦åéæ°æ¸²æ
å½æ¥ææ°å¼çrerenderä½ä¸ºkeyæ¶ï¼æ¥æäºæ°keyçCompåºç°äºï¼é£ä¹æ§keyCompä¼è¢«ç§»é¤ï¼æ°keyComp触å渲æ
äºã设置keyä¸ä¸è®¾ç½®keyåºå«ä¸¾ä¸ªä¾åï¼å建ä¸ä¸ªå®ä¾ï¼2ç§åå¾itemsæ°ç»æå ¥æ°æ®
<body><divid="demo"><pv-for="iteminitems":key="item">{ { item}}</p></div><scriptsrc="../../dist/vue.js"></script><script>//å建å®ä¾constapp=newVue({ el:'#demo',源码data:{ items:['a','b','c','d','e']},mounted(){ setTimeout(()=>{ this.items.splice(2,0,'f')//},);},});</script></body>å¨ä¸ä½¿ç¨keyçæ åµï¼vueä¼è¿è¡è¿æ ·çæä½ï¼
åæä¸æ´ä½æµç¨ï¼
æ¯è¾Aï¼Aï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼ä½æ°æ®ç¸åï¼ä¸åçdomæä½
æ¯è¾Bï¼Bï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼ä½æ°æ®ç¸åï¼ä¸åçdomæä½
æ¯è¾Cï¼Fï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼æ°æ®ä¸åï¼åçdomæä½
æ¯è¾Dï¼Cï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼æ°æ®ä¸åï¼åçdomæä½
æ¯è¾Eï¼Dï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼æ°æ®ä¸åï¼åçdomæä½
循ç¯ç»æï¼å°Eæå ¥å°DOMä¸ä¸å ±åçäº3次æ´æ°ï¼1次æå ¥æä½
å¨ä½¿ç¨keyçæ åµï¼vueä¼è¿è¡è¿æ ·çæä½ï¼
æ¯è¾Aï¼Aï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼ä½æ°æ®ç¸åï¼ä¸åçdomæä½
æ¯è¾Bï¼Bï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼ä½æ°æ®ç¸åï¼ä¸åçdomæä½
æ¯è¾Cï¼Fï¼ä¸ç¸åç±»åçèç¹
æ¯è¾EãEï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼ä½æ°æ®ç¸åï¼ä¸åçdomæä½
æ¯è¾DãDï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼ä½æ°æ®ç¸åï¼ä¸åçdomæä½
æ¯è¾CãCï¼ç¸åç±»åçèç¹ï¼è¿è¡patchï¼ä½æ°æ®ç¸åï¼ä¸åçdomæä½
循ç¯ç»æï¼å°Fæå ¥å°Cä¹åä¸å ±åçäº0次æ´æ°ï¼1次æå ¥æä½éè¿ä¸é¢ä¸¤ä¸ªå°ä¾åï¼å¯è§è®¾ç½®keyè½å¤å¤§å¤§åå°å¯¹é¡µé¢çDOMæä½ï¼æé«äºdiffæç
设置keyå¼ä¸å®è½æé«diffæçåï¼å ¶å®ä¸ç¶ï¼ææ¡£ä¸ä¹æ确表示å½Vue.jsç¨v-foræ£å¨æ´æ°å·²æ¸²æè¿çå ç´ å表æ¶ï¼å®é»è®¤ç¨âå°±å°å¤ç¨âçç¥ãå¦ææ°æ®é¡¹ç顺åºè¢«æ¹åï¼Vueå°ä¸ä¼ç§»å¨DOMå ç´ æ¥å¹é æ°æ®é¡¹ç顺åºï¼èæ¯ç®åå¤ç¨æ¤å¤æ¯ä¸ªå ç´ ï¼å¹¶ä¸ç¡®ä¿å®å¨ç¹å®ç´¢å¼ä¸æ¾ç¤ºå·²è¢«æ¸²æè¿çæ¯ä¸ªå ç´ è¿ä¸ªé»è®¤ç模å¼æ¯é«æçï¼ä½æ¯åªéç¨äºä¸ä¾èµåç»ä»¶ç¶ææ临æ¶DOMç¶æ(ä¾å¦ï¼è¡¨åè¾å ¥å¼)çå表渲æè¾åºå»ºè®®å°½å¯è½å¨ä½¿ç¨?v-for?æ¶æä¾?keyï¼é¤ééåè¾åºçDOMå 容é常ç®åï¼æè æ¯å»æä¾èµé»è®¤è¡ä¸ºä»¥è·åæ§è½ä¸çæå
ä¸ãåçåææºç ä½ç½®ï¼core/vdom/patch.jséå¤ææ¯å¦ä¸ºåä¸ä¸ªkeyï¼é¦å å¤æçæ¯keyå¼æ¯å¦ç¸çå¦æ没æ设置keyï¼é£ä¹key为undefinedï¼è¿æ¶åundefinedæ¯æçäºundefined
functionsameVnode(a,b){ return(a.key===b.key&&((a.tag===b.tag&&a.isComment===b.isComment&&isDef(a.data)===isDef(b.data)&&sameInputType(a,b))||(isTrue(a.isAsyncPlaceholder)&&a.asyncFactory===b.asyncFactory&&isUndef(b.asyncFactory.error))))}updateChildrenæ¹æ³ä¸ä¼å¯¹æ°æ§vnodeè¿è¡diffï¼ç¶åå°æ¯å¯¹åºçç»æç¨æ¥æ´æ°çå®çDOM
functionupdateChildren(parentElm,oldCh,newCh,insertedVnodeQueue,removeOnly){ ...while(oldStartIdx<=oldEndIdx&&newStartIdx<=newEndIdx){ if(isUndef(oldStartVnode)){ ...}elseif(isUndef(oldEndVnode)){ ...}elseif(sameVnode(oldStartVnode,newStartVnode)){ ...}elseif(sameVnode(oldEndVnode,newEndVnode)){ ...}elseif(sameVnode(oldStartVnode,newEndVnode)){ //Vnodemovedright...}elseif(sameVnode(oldEndVnode,newStartVnode)){ //Vnodemovedleft...}else{ if(isUndef(oldKeyToIdx))oldKeyToIdx=createKeyToOldIdx(oldCh,oldStartIdx,oldEndIdx)idxInOld=isDef(newStartVnode.key)?oldKeyToIdx[newStartVnode.key]:findIdxInOld(newStartVnode,oldCh,oldStartIdx,oldEndIdx)if(isUndef(idxInOld)){ //NewelementcreateElm(newStartVnode,insertedVnodeQueue,parentElm,oldStartVnode.elm,false,newCh,newStartIdx)}else{ vnodeToMove=oldCh[idxInOld]if(sameVnode(vnodeToMove,newStartVnode)){ patchVnode(vnodeToMove,newStartVnode,insertedVnodeQueue,newCh,newStartIdx)oldCh[idxInOld]=undefinedcanMove&&nodeOps.insertBefore(parentElm,vnodeToMove.elm,oldStartVnode.elm)}else{ //samekeybutdifferentelement.treatasnewelementcreateElm(newStartVnode,insertedVnodeQueue,parentElm,oldStartVnode.elm,false,newCh,newStartIdx)}}newStartVnode=newCh[++newStartIdx]}}...}åæï¼/post/c++ splice 使ç¨
å¦æä½ æ³éªè¯çè¯å°±æä½ ç¬¬ä¸æ¬¡è°ç¨spliceçè¯å¥ç¨//注éè°ï¼ç¶åæ第äºæ¬¡è°ç¨çè¯å¥æ¹ææç»ä½ åçé£æ ·ï¼ç¶åä½ å°±ä¼å¾å°ä½ è¦ççæ¡äº
Vue2剥丝抽茧-响应式系统之set和delete
深入解析 Vue2 源码,理解响应式系统中的分析 set 和 delete 方法。
首先,源码数组的分析set 和 delete 方法并不直接触发组件更新。数组的源码3d引擎源码响应性需要通过数组方法如 push 或 splice 来实现。
若需替换数组元素,分析如何搭建淘宝客源码可利用 splice 方法间接实现。源码同时,分析提供 set 方法供操作,源码简化数组元素替换流程。分析
对于对象的源码 set 方法,Vue2 通过观察对象属性变化触发更新。分析在 updateComponent 方法中,源码苹果跳过软件广告源码对象属性未直接参与观察,分析导致 c 属性非响应式。源码
通过 set 方法添加响应式属性 c,但 Watcher 未被重新触发。java多线程安全源码这是因为 c 属性的 Dep 对象在 set 函数中并未收集到相关依赖。解决办法是手动调用 Dep 对象,使 c 属性收集依赖,进而触发 Watcher。java记账管理系统源码
将触发 Watcher 的逻辑整合至 set 函数中,通过修改 Dep 收集所有对象属性的依赖。虽然 a 和 b 属性的依赖被收集,但 c 属性的依赖可能被遗漏。手动执行 Dep 可增加 c 属性收集依赖的机会。
对象的 del 方法则需执行对象的 Dep 来删除属性。由于 Dep 存在于闭包中,无法直接访问,执行对象的 Dep 可实现属性删除的响应式。
综上所述,通过为对象收集依赖,结合 set 和 del 方法,使得数组、对象的修改和删除操作也变为响应式。这不仅增强了 Vue2 的灵活性,也为开发者提供了更为简便的使用体验。