Vue.js 框架源码与进阶

心已赠人 2023-03-01 09:59 1阅读 0赞

### 导学 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

### 课程目标 ###

*  了解什么是虚拟DOM，以及虚拟DOM的作用
 *  Snabbdom的基本使用
 *  Snabbdom的源码解析

### 什么是Virtual DOM ###

*  Virtual DOM（虚拟DOM），是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫Virtual DOM
 *  真实DOM成员

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

*  可以使用Virtual DOM来描述真实DOM，示例

{ 
        sel: "div", 
        data: {}, 
        children: undefined, 
        text: "Hello Virtual DOM", 
        elm: undefined, 
        key: undefined 
    }

注意：创建一个虚拟DOM比创建一个真实的DOM成本低很多

### 为什么使用虚拟DOM ###

*  手动操作DOM比较麻烦，还需要考虑浏览器兼容性问题，虽然有jQuery等库简化DOM操作，但是随着项目的复杂DOM操作复杂提升
 *  为了简化DOM的复杂操作于是出现了各种MVVM框架，MVVM框架解决了视图和状态的同步问题
 *  为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，于是Virtual DOM出现了
 *  Virtual DOM的好处是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM,Virtual DOM内部将弄清楚如何有效（diff）的更新DOM
 *  参考 github上 virtual-dom的描述

1. 虚拟DOM可以维护程序的状态，跟踪上一次的状态

2. 通过比较前后两次状态的差异更新真实DOM

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

### 虚拟DOM的作用 ###

*  维护视图和状态的关系
 *  复杂视图情况下提升渲染性能
 *  除了渲染DOM以外，还可以实现SSR(Nuxt.js/Next.js)、原生应用（weex/React Native）、小程序（mpvue/uni-app）等

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

Virtual DOM库

1.  Snabbdom
    
    1.  Vue 2.x内部使用的Virtual DOM就是改造的Snabbdom
    2.  大约200SLOC(single line of code)
    3.  通过模块扩展
    4.  源码使用TypeScript开发
    5.  最快的Virtual DOM之一
2.  virtual-dom

**Snabbdom基本使用**

**创建项目**

*  打包工具为了方便使用parcel
 *  创建项目，并安装parcel

# 创建项目目录
    md snabbdom-demo
    # 进入项目目录
    cd snabbdom-demo
    # 创建 package.json
    yarn init -y
    # 本地安装 parcel
    yarn add parcel-bundler

*  配置package.json的scripts

"scripts": {
        "dev": "parcel index.html --open",
        "build": "parcel build index.html"
    }

*  创建目录结构

index.html
    package.json
    01-basicuage.js

**导入Snabbdom**

中文文档：[https://github.com/coconilu/Blog/issues/152][https_github.com_coconilu_Blog_issues_152]

yarn add snabbdom

*  Snabbdom的官网demo中导入使用的是commonjs模块化语法，我们使用更流行的ES6模块化的语法import
 *  关于模块化的语法请参考阮一峰老师的Module的语法
 *  ES6模块与commonJS模块的差异（[https://www.cnblogs.com/raind/p/9536600.html][https_www.cnblogs.com_raind_p_9536600.html]）

import {init, h, thunk} from 'snabbdom'

*  Snabbdom的核心仅提供最基本的功能，只导出了三个函数init()、h()、thunk()
    
     *  init()是一个高阶函数，返回patch()
     *  h()返回虚拟节点VNode,这个函数我们在使用Vue.js的时候见过

new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')

*   *  thunk()是一种优化策略，可以在处理不变数据时使用
     *  thunk()是一种优化策略，可以在处理不变数据时使用
 *  注意：导入时候不能使用import snabbdom from 'snabbdom'
    
     *  原因： node\_modules/src/snabbdom.ts末尾导出使用的语法是export导出API，没有使用export default导出默认输出

export {h} from './h'
    export {thunk} from './thunk'
    
    export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI)
    }

### Snabbdom的基本用法 ###

两个案例来展示init()和h()这两个函数的功能

01-basicusage.js：

import { h, init} from 'snabbdom'
    
    
    // 1. hello world
    // 参数： 数组，模块
    // 返回值：patch函数，作用对比两个vnode的差异更新到真实DOM
    let patch = init([])
    // 第一个参数： 标签+ 选择器
    // 第二个参数： 如果是字符串的话就是标签中的内容
    let vnode = h('div#container.cls','Hello World')
    
    let app = document.querySelector('#app')
    
    // 第一个参数： 可以是DOM元素，内部会把DOM元素转换成VNode
    // 第二个参数： VNode
    // 返回值：VNode
    let  oldVNode = patch(app, vnode)
    
    // 假设的时刻
    vnode = h('div', 'Hello Snabbdom')
    
    patch(oldVNode, vnode)

02-basicusage.js：

// 2. div中放置子元素 h1,p
    import { h , init } from 'snabbdom'
    
    let patch = init([])
    
    let vnode = h('div#container',[
      h('h1', 'Hello Snabbdom'),
      h('p', '这是一个p标签')
    ])
    
    let app = document.querySelector('#app')
    
    let oldVnode = patch(app, vnode)
    
    setTimeout(() => {
      vnode = h('div#container',[
        h('h1', 'Hello World'),
        h('p', 'Hello P')
      ])
      patch(oldVnode, vnode)
    
      // 清空页面元素 -- 错误
      // patch(oldVnode, null)
      patch(oldVnode, h('!'))
    }, 2000);

### Snabbdom的模块 ###

Snabbdom的核心库并不能处理元素的属性/样式/事件等，如果需要处理的话，可以使用模块

**常用模块**

1.  官方提供了6个模块
    
    1.  attributes
        
        1.  设置DOM元素的属性，使用setAttribute()
        2.  处理布尔类型的属性
    2.  props
        
        1.  和attributes模块相似，设置DOM元素的属性element\[attr\] = value
        2.  不处理布尔类型的属性
    3.  class
        
        1.  切换类样式
        2.  注意：给元素设置类样式是通过sel选择器
    4.  dataset
        
        1.  切换类样式
        2.  注意：给元素设置类样式是通过 sel 选择器
    5.  eventlisteners
        
        1.  注册和移除事件
    6.  style
        
        1.  设置行内样式，支持动画
        2.  delayed/remove/destroy

模块使用

1.  模块使用步骤
    
    1.  导入需要的模块
    2.  init() 中注册模块
    3.  使用 h() 函数创建VNode的时候，可以把第二个参数设置为对象，其他参数往后移

代码演示：

import { init, h } from 'snabbdom'
    // 1. 导入模块
    import style from 'snabbdom/modules/style'
    import eventlisteners from 'snabbdom/modules/eventlisteners'
    // 2. 注册模块
    let patch = init([
      style,
      eventlisteners
    ])
    // 3. 使用h() 函数的第二个参数传入模块需要的数据（对象）
    let vnode = h('div', {
      style: {
        backgroundColor: 'red'
      },
      on: {
        click: eventHandler
      }
    },[
      h('h1', 'Hello Snabbdom'),
      h('p', '这是p标签')
    ])
    
    function eventHandler () {
      console.log('点击我了')
    }
    
    let app = document.querySelector('#app')
    
    patch(app, vnode)

### Snabbdom源码解析 ###

**概述**

**如何学习源码**

*  先宏观了解
 *  带着目标看源码
 *  看源码的过程要求不求甚解
 *  调试
 *  参考资料

Snabbdom的核心

*  使用h()函数创建JavaScript对象(VNode)描述真实DOM
 *  init()设置模块，创建patch()
 *  patch()比较新旧两个VNode
 *  把变化的内容更新到真实DOM树上

Snabbdom源码

*  源码地址
    
     *  [https://github.com/snabbdom/snabbdom][https_github.com_snabbdom_snabbdom]
 *  src目录结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4][]

**h函数**

*  h()函数介绍

*  在使用Vue的时候见过h()函数

new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')

*  h()函数最早见于hyperScript，使用JavaScript创建超文本
 *  Snabbdom中的h()函数不是用来创建超文本，而是创建VNode

*  函数重载
    
     *  概念
        
         *  参数个数或类型不同的函数
         *  JavaScript中没有重载的概念
         *  TypeScript中有重载，不过重载的实现还是通过代码调整参数

*  重载的示意

function add(a, b) {
        console.log(a + b)
    }
    function add (a, b, c) {
        console.log(a + b + c)
    }
    add(1, 2)
    add(1, 2, 3)

源码位置： src/h.ts (作用：调用vnode函数返回虚拟节点)

import { vnode, VNode, VNodeData } from './vnode'
    import * as is from './is'
    
    export type VNodes = VNode[]
    export type VNodeChildElement = VNode | string | number | undefined | null
    export type ArrayOrElement<T> = T | T[]
    export type VNodeChildren = ArrayOrElement<VNodeChildElement>
    
    function addNS (data: any, children: VNodes | undefined, sel: string | undefined): void {
      data.ns = 'http://www.w3.org/2000/svg'
      if (sel !== 'foreignObject' && children !== undefined) {
        for (let i = 0; i < children.length; ++i) {
          const childData = children[i].data
          if (childData !== undefined) {
            addNS(childData, (children[i] as VNode).children as VNodes, children[i].sel)
          }
        }
      }
    }
    
    export function h(sel: string): VNode
    export function h(sel: string, data: VNodeData | null): VNode
    export function h(sel: string, children: VNodeChildren): VNode
    export function h(sel: string, data: VNodeData | null, children: VNodeChildren): VNode
    export function h (sel: any, b?: any, c?: any): VNode {
      var data: VNodeData = {}
      var children: any
      var text: any
      var i: number
      if (c !== undefined) {
        if (b !== null) {
          data = b
        }
        if (is.array(c)) {
          children = c
        } else if (is.primitive(c)) {
          text = c
        } else if (c && c.sel) {
          children = [c]
        }
      } else if (b !== undefined && b !== null) {
        if (is.array(b)) {
          children = b
        } else if (is.primitive(b)) {
          text = b
        } else if (b && b.sel) {
          children = [b]
        } else { data = b }
      }
      if (children !== undefined) {
        for (i = 0; i < children.length; ++i) {
          if (is.primitive(children[i])) children[i] = vnode(undefined, undefined, undefined, children[i], undefined)
        }
      }
      if (
        sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' &&
        (sel.length === 3 || sel[3] === '.' || sel[3] === '#')
      ) {
        addNS(data, children, sel)
      }
      return vnode(sel, data, children, text, undefined)
    };

**必备快捷键**

*  F12、Ctrl+ 单击鼠标左键，快速定位到引入的位置
 *  Alt + 左键，返回刚才的定位
 *  选中array，F12查看array可以看见is下array的实现

**vnode**

export interface VNode {
      sel: string | undefined
      data: VNodeData | undefined
      children: Array<VNode | string> | undefined
      elm: Node | undefined
      text: string | undefined
      key: Key | undefined
    }
    
    export interface VNodeData {
      props?: Props
      attrs?: Attrs
      class?: Classes
      style?: VNodeStyle
      dataset?: Dataset
      on?: On
      hero?: Hero
      attachData?: AttachData
      hook?: Hooks
      key?: Key
      ns?: string // for SVGs
      fn?: () => VNode // for thunks
      args?: any[] // for thunks
      [key: string]: any // for any other 3rd party module
    }
    
    export function vnode (sel: string | undefined,
      data: any | undefined,
      children: Array<VNode | string> | undefined,
      text: string | undefined,
      elm: Element | Text | undefined): VNode {
      const key = data === undefined ? undefined : data.key
      return { sel, data, children, text, elm, key }
    }

### VNode渲染真实DOM ###

snabbdom

*  patch(oldVnode, newVnode)
 *  打补丁，把新节点中变化的内容渲染到真实DOM，最后返回新节点作为下一次处理的旧节点
 *  对比新旧VNode是否相同节点（节点的key和sel相同）
 *  如果不是相同节点，删除之前的内容，重新渲染
 *  如果是相同节点，再判断新的VNode是否有text，如果有并且和oldVnode的text不同，直接更新文本内容
 *  diff过程只进行同层级比较

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5][]

init函数

设置模块，传入modules和domApi；没有传第二个参数domApi时，使用htmlDomApi（把虚拟DOM转换成真实DOM）

export interface DOMAPI {
      createElement: (tagName: any) => HTMLElement
      createElementNS: (namespaceURI: string, qualifiedName: string) => Element
      createTextNode: (text: string) => Text
      createComment: (text: string) => Comment
      insertBefore: (parentNode: Node, newNode: Node, referenceNode: Node | null) => void
      removeChild: (node: Node, child: Node) => void
      appendChild: (node: Node, child: Node) => void
      parentNode: (node: Node) => Node | null
      nextSibling: (node: Node) => Node | null
      tagName: (elm: Element) => string
      setTextContent: (node: Node, text: string | null) => void
      getTextContent: (node: Node) => string | null
      isElement: (node: Node) => node is Element
      isText: (node: Node) => node is Text
      isComment: (node: Node) => node is Comment
    }
    
    function createElement (tagName: any): HTMLElement {
      return document.createElement(tagName)
    }
    
    function createElementNS (namespaceURI: string, qualifiedName: string): Element {
      return document.createElementNS(namespaceURI, qualifiedName)
    }
    
    function createTextNode (text: string): Text {
      return document.createTextNode(text)
    }
    
    function createComment (text: string): Comment {
      return document.createComment(text)
    }
    
    function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node | null): void {
      parentNode.insertBefore(newNode, referenceNode)
    }
    
    function removeChild (node: Node, child: Node): void {
      node.removeChild(child)
    }
    
    function appendChild (node: Node, child: Node): void {
      node.appendChild(child)
    }
    
    function parentNode (node: Node): Node | null {
      return node.parentNode
    }
    
    function nextSibling (node: Node): Node | null {
      return node.nextSibling
    }
    
    function tagName (elm: Element): string {
      return elm.tagName
    }
    
    function setTextContent (node: Node, text: string | null): void {
      node.textContent = text
    }
    
    function getTextContent (node: Node): string | null {
      return node.textContent
    }
    
    function isElement (node: Node): node is Element {
      return node.nodeType === 1
    }
    
    function isText (node: Node): node is Text {
      return node.nodeType === 3
    }
    
    function isComment (node: Node): node is Comment {
      return node.nodeType === 8
    }
    
    export const htmlDomApi: DOMAPI = {
      createElement,
      createElementNS,
      createTextNode,
      createComment,
      insertBefore,
      removeChild,
      appendChild,
      parentNode,
      nextSibling,
      tagName,
      setTextContent,
      getTextContent,
      isElement,
      isText,
      isComment,
    }

// 初始化转换虚拟节点的api
     const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi
    
    // 把传入的所以模块的钩子函数，统一存储到cbs对象中
    // 最终构建的cbs对象的形式 cbs = { crete: [fn1, fn2], update: [], ...}
      for (i = 0; i < hooks.length; ++i) {
        cbs[hooks[i]] = []
        for (j = 0; j < modules.length; ++j) {
          const hook = modules[j][hooks[i]]
          if (hook !== undefined) {
            (cbs[hooks[i]] as any[]).push(hook)
          }
        }
      }

module:

import { PreHook, CreateHook, UpdateHook, DestroyHook, RemoveHook, PostHook } from '../hooks'
    
    export type Module = Partial<{
      pre: PreHook
      create: CreateHook
      update: UpdateHook
      destroy: DestroyHook
      remove: RemoveHook
      post: PostHook
    }>

patch函数

// init 内部返回 patch函数，把 vnode 渲染成真实 dom，并返回vnode
    return function patch (oldVnode: VNode | Element, vnode: VNode): VNode {
        let i: number, elm: Node, parent: Node
        // 保存新插入节点的队列，为了触发钩子函数
        const insertedVnodeQueue: VNodeQueue = []
        // 执行模块的pre 钩子函数
        for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]()
        
        // 如果 oldVnode不是VNode，创建VNode 并设置 elm
        if (!isVnode(oldVnode)) {
            // 把DOM元素转换成空的 VNode
          oldVnode = emptyNodeAt(oldVnode)
        }
        // 如果新旧节点是相同节点(key 和sel 相同)
        if (sameVnode(oldVnode, vnode)) {
            // 找节点的差异并更新 DOM
          patchVnode(oldVnode, vnode, insertedVnodeQueue)
        } else {
            // 如果新旧节点不同，vnode创建对应的 DOM
            // 获取当前的 DOM元素
          elm = oldVnode.elm!
          parent = api.parentNode(elm) as Node
          // 创建 vnode对应的DOM元素，并触发 init/reate 钩子函数
          createElm(vnode, insertedVnodeQueue)
    
          if (parent !== null) {
            // 如果父节点不为空，把 vnode对应的 DOM插入到文档中
            api.insertBefore(parent, vnode.elm!, api.nextSibling(elm))
            // 移除老节点
            removeVnodes(parent, [oldVnode], 0, 0)
          }
        }
        // 执行用户设置的insert 钩子函数
        for (i = 0; i < insertedVnodeQueue.length; ++i) {
          insertedVnodeQueue[i].data!.hook!.insert!(insertedVnodeQueue[i])
        }
        // 执行模块的post钩子函数
        for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()
        // 返回 vnode
        return vnode
      }

**createElm**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6][]

**addVnodes和removeVnodes**

function addVnodes (
        parentElm: Node,
        before: Node | null,
        vnodes: VNode[],
        startIdx: number,
        endIdx: number,
        insertedVnodeQueue: VNodeQueue
      ) {
        for (; startIdx <= endIdx; ++startIdx) {
          const ch = vnodes[startIdx]
          if (ch != null) {
            api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before)
          }
        }
      }

// 批量删除节点
       function removeVnodes (parentElm: Node,
        vnodes: VNode[],
        startIdx: number,
        endIdx: number): void {
        for (; startIdx <= endIdx; ++startIdx) {
          let listeners: number
          let rm: () => void
          const ch = vnodes[startIdx]
          if (ch != null) {
            if (isDef(ch.sel)) {
              invokeDestroyHook(ch)
              listeners = cbs.remove.length + 1
              rm = createRmCb(ch.elm!, listeners)
              for (let i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm)
              const removeHook = ch?.data?.hook?.remove
              if (isDef(removeHook)) {
                removeHook(ch, rm)
              } else {
                rm()
              }
            } else { // Text node
              api.removeChild(parentElm, ch.elm!)
            }
          }
        }
      }

**patchVnode**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 7][]

function patchVnode (oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {
        const hook = vnode.data?.hook
        hook?.prepatch?.(oldVnode, vnode)
        const elm = vnode.elm = oldVnode.elm!
        const oldCh = oldVnode.children as VNode[]
        const ch = vnode.children as VNode[]
        if (oldVnode === vnode) return
        if (vnode.data !== undefined) {
            // 执行模块的 update钩子函数
          for (let i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
          // 执行用户设置的 update 钩子函数
          vnode.data.hook?.update?.(oldVnode, vnode)
        }
        // 如果vnode.text 未定义
        if (isUndef(vnode.text)) {
          // 如果新老节点都有 children
          if (isDef(oldCh) && isDef(ch)) {
            // 使用diff算法对比子节点，老节点没有children
            if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue)
          } else if (isDef(ch)) {
            // 如果新节点有children，老节点没有children
            // 如果老节点有text，清空dom元素的内容
            if (isDef(oldVnode.text)) api.setTextContent(elm, '')
            // 批量添加子节点
            addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
            // 如果没有设置vnode.text
          } else if (isDef(oldCh)) {
              // 如果老节点有chaldren移除
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)
          } else if (isDef(oldVnode.text)) {
            api.setTextContent(elm, '')
          }
        } else if (oldVnode.text !== vnode.text) {
          if (isDef(oldCh)) {
            removeVnodes(elm, oldCh, 0, oldCh.length - 1)
          }
          // 设置DOM元素的 textContent 为vnode.text
          api.setTextContent(elm, vnode.text!)
        }
        // 最后执行用户设置的 postpatch 钩子函数
        hook?.postpatch?.(oldVnode, vnode)
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20230209/7a2f7562574043688f8b548dc9181e14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1]: /images/20230209/6428a773d40b437fb553fce9d1f34a06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2]: /images/20230209/4a1268014dab47a3ab1d3de133c1e8d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3]: /images/20230209/256fd70f0d2a4a19b1c62e684d64a0c2.png
[https_github.com_coconilu_Blog_issues_152]: https://github.com/coconilu/Blog/issues/152
[https_www.cnblogs.com_raind_p_9536600.html]: https://www.cnblogs.com/raind/p/9536600.html
[https_github.com_snabbdom_snabbdom]: https://github.com/snabbdom/snabbdom
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4]: /images/20230209/911d202715874a06934e2d9c7370f2d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5]: /images/20230209/96fbacd86a6d451fa90519978ab1fb89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6]: /images/20230209/3a8e2f4fc944498d8127feaab01a09f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 7]: /images/20230209/b4449aa67c804ed095f1801d082b98c7.png