一次性搞清楚element-ui里用到this._l()是什麼意思

￡神魔★判官ぃ 2023-01-07 07:20 136阅读 0赞

參考 https://segmentfault.com/q/1010000017896162/a-1020000017896676

查看Vue.js的源碼,可以看到如下兩段代碼

function installRenderHelpers (target) { 
        target._o = markOnce;
        target._n = toNumber;
        target._s = toString;
        target._l = renderList;
        target._t = renderSlot;
        target._q = looseEqual;
        target._i = looseIndexOf;
        target._m = renderStatic;
        target._f = resolveFilter;
        target._k = checkKeyCodes;
        target._b = bindObjectProps;
        target._v = createTextVNode;
        target._e = createEmptyVNode;
        target._u = resolveScopedSlots;
        target._g = bindObjectListeners;
      }

renderList 的函數,從代碼的意思上看類似val.map(render)  
意思是通過render函數(自定義的函數)處理數組val,然後返回一個新的數組

在Vue項目的  
render函數里打印this  
render (h) \{  
console.log(this)  
\}  
![在这里插入图片描述][20210116102941984.png]

其中\_l的藏在  
Proxy.Target.\_\_proto\_\_的\_\_proto\_\_的屬性  
在created函數里打印this  
created () \{  
console.log(this)  
\}  
![在这里插入图片描述][20210116102957133.png]其中\_l的藏在  
VueCompnent.\_\_proto\_\_的\_\_proto\_\_的屬性![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70]

[20210116102941984.png]: /images/20221119/3e34d248219646209775b968b10110be.png
[20210116102957133.png]: /images/20221119/8da48435e8d84e3897ef1a0ba8ee21be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210116103111694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q=,size_16,color_FFFFFF,t_70