Vue.js 源码剖析-虚拟 DOM

超、凢脫俗 2022-10-26 04:57 231阅读 0赞

### 文章目录 ###

*  虚拟 DOM 回顾
 *   *  什么是虚拟 DOM
 *  为什么要使用虚拟 DOM
 *  Vue.js 中的虚拟 DOM
 *  整体过程分析
 *  createElement-上
 *  createElement-下
 *  update
 *  patch 函数的初始化
 *  createElm
 *  patchVnode
 *  updateChildren
 *  没有设置key的情况
 *  设置key的情况
 *  总结

# 虚拟 DOM 回顾 #

## 什么是虚拟 DOM ##

*  虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM。
 *  Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，例如：指令和组件机制。
 *  Vue 1.x 中细粒度监测数据的变化，每一个属性对应一个 watcher，开销太大Vue 2.x 中每个组件对应一个 watcher，状态变化通知到组件，再引入虚拟 DOM 进行比对和渲染

# 为什么要使用虚拟 DOM #

*  使用虚拟 DOM，可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如何操作 DOM，从而提高开发效率
 *  作为一个中间层可以跨平台，除了 Web 平台外，还支持 SSR、Weex。
 *  关于性能方面，在首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚拟 DOM，如果后续有频繁操作 DOM 的操作，这个时候可能会有性能的提升，虚拟 DOM 在更新真实 DOM之前会通过 Diff 算法对比新旧两个虚拟 DOM 树的差异，最终把差异更新到真实 DOM

# Vue.js 中的虚拟 DOM #

const vm = new Vue({ 
          el: '#app',
          render (h) { 
            // h(tag, data, children) 1标签或组件的选项对象2设置属性和事件等3字符串（内容）或数组（子节点），vue中的h函数还支持组件和插槽
            // return h('h1', this.msg)
            // return h('h1', { domProps: { innerHTML: this.msg } }) 设置dom属性
            // return h('h1', { attrs: { id: 'title' } }, this.msg) 设置标签属性
            const vnode = h(
              'h1', 
              {  
                attrs: {  id: 'title' } 
              },
              this.msg
            )
            console.log(vnode)
            return null
          },
          data: { 
            msg: 'Hello Vue'
          }
        })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
打印返回的vnode  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]  
看着属性多，但比真dom还是少很多，记住 children data elm（转换成真dom后会存入elm，里存的就是dom所有属性） key tag text即可。

如果第三个参数是String的时候，会转换成vnode对象去描述文本节点。  
![在这里插入图片描述][20210202075934568.png]  
h函数参数回顾  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]  
返回结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]

# 整体过程分析 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]  
虚拟dom部分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]  
这里的$createElement就是 h函数。  
返回的vnod会传入vm.\_update()  
![在这里插入图片描述][2021020208113554.png]

# createElement-上 #

lifecycle中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]  
render.js 中  
\_render 核心就是 1.获取用户render2.然后执行

const {  render, _parentVnode } = vm.$options //获取用户的render
       //这里的vm.$createElement参数就是 render中的h函数去生成虚拟dom
      vnode = render.call(vm._renderProxy, vm.$createElement) //最核心的一句 通过call改变render内部this

观察$createElement  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]  
在create-elemnt.js

export function createElement (
      context: Component,//vue实例
      tag: any,
      data: any,
      children: any,
      normalizationType: any,
      alwaysNormalize: boolean//用户是true
    ): VNode | Array<VNode> { 
      if (Array.isArray(data) || isPrimitive(data)) { 
        //这里判断是否数组和原始值可以表示节点和文本内容，这样就可以只船俩个参数了
        normalizationType = children
        children = data
        data = undefined
      }
      if (isTrue(alwaysNormalize)) { 
        normalizationType = ALWAYS_NORMALIZE
      }//这个函数创建vnode
      return _createElement(context, tag, data, children, normalizationType)
    }

# createElement-下 #

\_createElement  
判断是否是响应式对象，如果是调用createEmptyVNode

export const createEmptyVNode = (text: string = '') => { 
      const node = new VNode()
      node.text = text
      node.isComment = true
      return node
    }

Vnode  
是个类  
![在这里插入图片描述][20210202083943237.png]  
创建了很多属性，但是记住几个即可上面有说。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]  
回到create-elemnt.js  
开始判断is是否有值明天则返回空vnode  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]  
判断key是否原始值，如果是空则返回空vnode  
继续判断children，处理成一维数组  
开始创建vnode

export function _createElement (
      context: Component,
      tag?: string | Class<Component> | Function | Object,
      data?: VNodeData,
      children?: any,
      normalizationType?: number
    ): VNode | Array<VNode> { 
      if (isDef(data) && isDef((data: any).__ob__)) { 
        process.env.NODE_ENV !== 'production' && warn(
          `Avoid using observed data object as vnode data: ${ JSON.stringify(data)}\n` +
          'Always create fresh vnode data objects in each render!',
          context
        )
        return createEmptyVNode()//如果此data是响应式数据返回空vnode
      }
      // <component v-bind:is="currentTabComponent"></component>这个是动态组件，把is中的内容渲染到组件中
      // object syntax in v-bind
      if (isDef(data) && isDef(data.is)) { 
        tag = data.is
      }
      if (!tag) { //如果是空则返回空vnode
        // in case of component :is set to falsy value
        return createEmptyVNode()
      }
      // warn against non-primitive key
      if (process.env.NODE_ENV !== 'production' &&
        isDef(data) && isDef(data.key) && !isPrimitive(data.key)
      ) { 
        if (!__WEEX__ || !('@binding' in data.key)) { 
          warn(
            'Avoid using non-primitive value as key, ' +
            'use string/number value instead.',
            context
          )
        }
      }
      // support single function children as default scoped slot
      if (Array.isArray(children) &&//这段处理作用域插槽
        typeof children[0] === 'function'
      ) { 
        data = data || { }
        data.scopedSlots = {  default: children[0] }
        children.length = 0
      }//这段处理作用域插槽end
    
      if (normalizationType === ALWAYS_NORMALIZE) { 
        // 返回一维数组，处理用户手写的 render
        children = normalizeChildren(children)
      } else if (normalizationType === SIMPLE_NORMALIZE) { 
        // 把二维数组，转换成一维数组
        children = simpleNormalizeChildren(children)
      }
    
      // 开始创建vnode
      let vnode, ns
      if (typeof tag === 'string') { 
        let Ctor
        ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
        // 是否是 html 的保留标签
        if (config.isReservedTag(tag)) { //如果是直接创建vnode
          // platform built-in elements
          if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) { 
            warn(
              `The .native modifier for v-on is only valid on components but it was used on <${ tag}>.`,
              context
            )
          }
          vnode = new VNode(
            config.parsePlatformTagName(tag), data, children,
            undefined, undefined, context
          )
        // 判断是否是 自定义组件
        } else if ((!data || !data.pre) && 
          isDef(Ctor = resolveAsset(context.$options, 'components', tag) // 查找自定义组件构造函数的声明
          )) { 
         
          // 根据 Ctor 创建组件的 VNode
          // component
          vnode = createComponent(Ctor, data, context, children, tag)
        } else { //如果不是保留标签，则是自定义标签
          // unknown or unlisted namespaced elements
          // check at runtime because it may get assigned a namespace when its
          // parent normalizes children
          vnode = new VNode(
            tag, data, children,
            undefined, undefined, context
          )
        }
      } else { //不是字符串则是组件
        // direct component options / constructor
        vnode = createComponent(tag, data, context, children)
      }
      //创建好vnode后进一步判断
      if (Array.isArray(vnode)) { //如果是array则直接返回
        return vnode
      } else if (isDef(vnode)) { //如果是已经定义的vnode则处理后返回
        if (isDef(ns)) applyNS(vnode, ns)
        if (isDef(data)) registerDeepBindings(data)
        return vnode
      } else { //以上条件都不满足则返回空的vnode
        return createEmptyVNode()
      }
    }

# update #

\_update最核心的就是调用了patch

# patch 函数的初始化 #

runtime/index中  
![在这里插入图片描述][20210206111520755.png]  
patch.js中  
![在这里插入图片描述][20210206111630660.png]  
观察nodePos  
里面都是操作dom的api  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]  
变量 modules  
![在这里插入图片描述][20210206111805375.png]  
runtime/modules/index中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]  
都是些样式或者事件，这里比snabdom多了transition

vdom/modules/index中  
这个是处理指令和ref的  
![在这里插入图片描述][20210206112138896.png]  
回到patchjs  
core/vdom/patchjs  
createPatchFunction（相当于init）函数返回了patch函数  
先遍历hook  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]  
返回的patch中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]

直接观察源码过一遍。

# createElm #

直接观察源码过一遍。

# patchVnode #

由于这个方法太长可以先看核心部分  
![在这里插入图片描述][20210206180641655.png]

# updateChildren #

直接观察源码过一遍。和snabdom里差不多，做了些优化。

# 没有设置key的情况 #

如果是vuecli项目，不设置key会有警告  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]  
直接调试一遍  
断点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]  
一直f8直到oldCh是li为止  
断点2  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]

# 设置key的情况 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 22]  
加key后 a一样 后面都开始比较结束的节点 最后剩下x 此时老数组StartIndex大于老endIndex 0更新 1新增![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 23]原因 如果key都是undefined 一样的话 在第二个元素就修改了text那么导致后面的顺序都乱了

# 总结 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 24]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 25]  
![在这里插入图片描述][20210206234110245.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 26]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 27]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 28]

updatechildren中多做了些优化 最开始先比较新老节点的头和尾。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221024/d73d8071bd804bf5a99b16af6049f4f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/c613bb94bbf74c19b1c34182ec1a926a.png
[20210202075934568.png]: /images/20221024/e97e3ee793f94509b0f82f78c96b3f76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/b800a931b9494c1d97e132f5754c9152.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/eced31820eaa4fc890155bd336d0dc9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/b417cf05b77e46e4887336769648a93a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/1fa9d8e87ddb482f964486171bc0e6c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/3e82aca304cf4f36b9b4d01d30ae177e.png
[2021020208113554.png]: /images/20221024/2dc157b005f54b4589edda37f2c4afc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/6b0c8db728bb44098adb4a14c39237cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/5ffd3669804c46289ef214a2fa45fe4d.png
[20210202083943237.png]: /images/20221024/81de5f90484d4d9886495edaa311ff45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/03ff25184e3646d3bfd4feac7c894cc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/920b583673a74c0c92b3463c2ea66b0d.png
[20210206111520755.png]: /images/20221024/c1aaddb273074e84b96e0a50a16ef7d5.png
[20210206111630660.png]: /images/20221024/9e8ecfad67584a0d8e00c3e7355d6c93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/d7fe2173d10d49de90ddef63c3688315.png
[20210206111805375.png]: /images/20221024/accc00c4f84b422d8ea1fa34f527befe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/25845e2ed1934239b2a7cce4c72a6fda.png
[20210206112138896.png]: /images/20221024/6eb6977deca645dc83993dba4b1b239c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/d7917a3a16d548749cf039b802337d14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]: /images/20221024/81f41c26050b495b90303cb3da08b749.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210206122821163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]: /images/20221024/f5166883c18f4c2da2bcebce27ca92f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]: /images/20221024/8180810d6fe54894b25fdeea9f985ffa.png
[20210206180641655.png]: /images/20221024/7595e9b2c06c4e63a757c4b8d2a8e50d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]: /images/20221024/3596e123bda74cd59ea08f3c55b080e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]: /images/20221024/19c941c0711e4fb09053f14c56b189bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]: /images/20221024/069c397a569a438cbbdb629cf007c063.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]: /images/20221024/1507c25de44f464eabfcb35a3fefd3cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 22]: /images/20221024/10226cbe890842c1859efaa90848a15d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 23]: /images/20221024/9bffb67b54784629b8d4a39003c24574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 24]: /images/20221024/c97613493ffa46e785a61d90c548679d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 25]: /images/20221024/32587d1845584aeaa40fbb7ccd891562.png
[20210206234110245.png]: /images/20221024/c9f4d4e16e5443549b567a4c752ed498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 26]: https://img-blog.csdnimg.cn/20210206234204950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 27]: /images/20221024/820e1fa8b43c462db05460b5905f9022.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 28]: /images/20221024/e599375ebf9a44cf9caf4c2bffe58c28.png