VUE源码学习第十一篇--响应式原理(订阅)

爱被打了一巴掌 2022-01-27 04:07 248阅读 0赞

# 一、总述 #

前一章节，通过对prop，data所定义的属性建立观察类和发布器，但此时的发布类Dep中sub空空如也，如何实现watcher的注册，并在属性发生变化时，实现更新。本章节将继续介绍订阅Watcher。

在介绍前，我们先思考下，用户定义的prop，data在哪些方法或者表达式是需要实现响应式变化的？

首先用户自定义的watch，computed是需要的，另外我们的视图也会用到大量的属性表达式(如前面的实例\{ \{item.id\}\}),也是需要的。method中虽然用到了这些数据，但是都是及时调用，所以不需要的。

事实上，源码中也是在这三个场景创建watcher，如果阅读过我前面的博客，在initWatcher,initComputer(第五篇)，以及mount(第六篇)简单的介绍过，做过一些知识的铺垫。

这三种watcher分别为user watcher，compute watcher，以及render watcher，本篇就结合前面的知识，详细介绍这几种watcher实现原理。

# 二、user watcher #

我们以下面的的watch为运行实例：

data:{
          msg:'this is msg',
          items:[
          {id:1},
          {id:2},
          {id:3}
          ]
        }
    watch: {
        msg: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
        ....
    }

回顾下第五篇initWatcher的创建watcher过程，如下：

Vue.prototype.$watch = function (
        expOrFn: string | Function,
        cb: any,
        options?: Object
      ): Function {
        ...
        //创建watcher对象,进行监听
        const watcher = new Watcher(vm, expOrFn, cb, options)
        ...
      }

其中主要入参，vm，即vue对象；expOrFn，待观察的表达式，即本例中属性msg对象；cb，回调函数，即本例中msg属性的对应的方法。watcher的定义位于src/core/observer/watcher.js。

export default class Watcher {
      vm: Component;
      expression: string;
      cb: Function;
      id: number;
      deep: boolean;
      user: boolean;
      computed: boolean;
      sync: boolean;
      dirty: boolean;
      active: boolean;
      dep: Dep;
      deps: Array<Dep>;
      newDeps: Array<Dep>;
      depIds: SimpleSet;
      newDepIds: SimpleSet;
      before: ?Function;
      getter: Function;
      value: any;
    
      constructor (
        vm: Component,//组件对象
        expOrFn: string | Function,//待观察的表达式
        cb: Function,//回调函数,更新的时候调用
        options?: ?Object,
        isRenderWatcher?: boolean
      ) {
        //1、初始化变量
        this.vm = vm
        if (isRenderWatcher) {
          vm._watcher = this
        }
        vm._watchers.push(this)
        // options
        if (options) {
          this.deep = !!options.deep
          this.user = !!options.user
          this.computed = !!options.computed
          this.sync = !!options.sync
          this.before = options.before
        } else {
          this.deep = this.user = this.computed = this.sync = false
        }
        this.cb = cb
        this.id = ++uid // uid for batching
        this.active = true
        this.dirty = this.computed // for computed watchers
        this.deps = []
        this.newDeps = []
        this.depIds = new Set()
        this.newDepIds = new Set()
        this.expression = process.env.NODE_ENV !== 'production'
          ? expOrFn.toString()
          : ''
        // parse expression for getter
        //2、解析表达式，获取getter方法
        if (typeof expOrFn === 'function') {
          this.getter = expOrFn
        } else {
          this.getter = parsePath(expOrFn)
          if (!this.getter) {
            this.getter = function () {}
            process.env.NODE_ENV !== 'production' && warn(
              `Failed watching path: "${expOrFn}" ` +
              'Watcher only accepts simple dot-delimited paths. ' +
              'For full control, use a function instead.',
              vm
            )
          }
        }
        //3、依赖收集
        if (this.computed) {
          //对于计算属性watcher，此时没有立即进行依赖收集，在执行render函数时收集
          this.value = undefined
          this.dep = new Dep()
        } else {
          //对于普通watcher,调用get方法，进行依赖收集
          this.value = this.get()
        }
      }
    ...
    }

**1、构造方法**

我们先看下其构造方法。主要过程包括：

(1)、初始化变量。主要变量如下：

deep，表示是否要进行深度监听，即属性嵌套的变量进行监听。

computed，表示是否是计算属性。

sync，表示更新时，是否需要同步执行。

deps，newDeps，该watcher对应的维护的发布器数组。

(2)、解析表达式，获取getter方法，如果expOrFn是function类型，则直接设置为getter方法，否则调用parsePath方法返回属性对象作为getter方法，本例中则使用后一种，执行结果为vm\[msg\]。

export function parsePath (path: string): any {
      ...
      return function (obj) {
        for (let i = 0; i < segments.length; i++) {
          if (!obj) return
          obj = obj[segments[i]]
        }
        return obj
      }
    }

(3)、依赖收集，这部分处理的很巧妙，对于非计算属性，直接调用了get方法(对于计算属性的watcher我们等会在表)。继续看下get方法。

**2、get方法**

get () {
        //1、将当前的watcher压栈
        pushTarget(this)
        let value
        const vm = this.vm
        try {
          //2、核心代码，依赖收集
          value = this.getter.call(vm, vm)
        } catch (e) {
          if (this.user) {
            handleError(e, vm, `getter for watcher "${this.expression}"`)
          } else {
            throw e
          }
        } finally {
          // "touch" every property so they are all tracked as
          // dependencies for deep watching
          //3、后置处理
          if (this.deep) {
            traverse(value)
          }
          popTarget()
          this.cleanupDeps()
        }
        return value
      }

(1）将自身的watcher对象压入栈，设置全局的变量Dep.target为当前的watcher对象。

export function pushTarget (_target: ?Watcher) {
      if (Dep.target) targetStack.push(Dep.target)
      Dep.target = _target
    }

(2)执行getter方法，触发该属性的get劫持，我们回顾前一章节定义的劫持方法。

Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
          const value = getter ? getter.call(obj) : val
          //依赖收集
          if (Dep.target) {
            dep.depend()
            if (childOb) {
              childOb.dep.depend()
              if (Array.isArray(value)) {
                dependArray(value)
              }
            }
          }
          return value
        }
    ...

全局变量Dep.target表示的就是当前的watcher对象，非空，继续调用Dep类的depend方法

depend () {
        if (Dep.target) {
          Dep.target.addDep(this)
        }
      }

最终又回调了watcher中的addDep方法，

addDep (dep: Dep) {
        const id = dep.id
        if (!this.newDepIds.has(id)) {
          //加入到watcher的dep数组
          this.newDepIds.add(id)
          this.newDeps.push(dep)
          if (!this.depIds.has(id)) {
            //加入到dep的sub数组
            dep.addSub(this)
          }
        }
      }

该方法，首先将dep保存到watcher的newDeps数组中，然后调用Dep的addSub，将watcher对象加入到sub数组中。

addSub (sub: Watcher) {
        this.subs.push(sub)
      }

整个调用过程比较绕，这样做的目的，就是为了建立dep和watcher间的双向链表。

(3)后置处理，包括deep处理，清除当前的watcher对象等。

整个过程完成后，msg属性的Dep对象的sub中就添加了watcher对象。msg的依赖模型如下：

![20190615094037856.png][]

# 三、compute watcher #

以下面的计算属性computeMsg为运行实例：

<div id="app">
       {
       {computeMsg}}
      ...
    </div>
    
    var vm = new Vue({
    data:{
          msg:'this is msg',
          items:[
          {id:1},
          {id:2},
          {id:3}
          ]
        }
    watch: {
        msg: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
    computed:{
        computeMsg:function(){
          return "this is computed msg:"+this.msg
        }
      }
        ....
    }

该实例中，创建computeMsg计算属性，并在模板(template)中使用。computeMsg计算属性表达式中调用了msg属性。

我们来回顾下第五章节的initComputed方法。

function initComputed (vm: Component, computed: Object) {
      // $flow-disable-line
      const watchers = vm._computedWatchers = Object.create(null)
      // computed properties are just getters during SSR
      const isSSR = isServerRendering()
      //1、循环计算属性
      for (const key in computed) {
        const userDef = computed[key]
        const getter = typeof userDef === 'function' ? userDef : userDef.get
        ...
    
        if (!isSSR) {
          // create internal watcher for the computed property.
          //2、为每个属性创建watcher
          watchers[key] = new Watcher(
            vm,
            getter || noop,
            noop,
            computedWatcherOptions
          )
        }
         
        ...
      //3、劫持数据变化，创建监听方法
        defineComputed(vm, key, userDef)
      }
    }
    
    export function defineComputed (
      target: any,
      key: string,
      userDef: Object | Function
    ) {
     const shouldCache = !isServerRendering()
      if (typeof userDef === 'function') {
        sharedPropertyDefinition.get = shouldCache
          ? createComputedGetter(key)
          : userDef
        sharedPropertyDefinition.set = noop
      } else {
        ....
      }
      //4、并对计算属性的getter和setter进行劫持
      Object.defineProperty(target, key, sharedPropertyDefinition)
    }
    }
    
    //getter方法劫持
    function createComputedGetter (key) {
      return function computedGetter () {
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
          //依赖收集，将订阅类添加到
          watcher.depend()
          //返回值
          return watcher.evaluate()
        }
      }
    }

在该方法中，循环所定义的计算属性，为每个计算属性创建watcher，并设置getter方法，监听数据变化（计算属性setter方法用的较少）。watcher的主要入参：vm，即vue对象；getter，计算属性的表达式，即本例中computeMsg对应的表达式。继续看下watcher的构造方法。

**1、构造函数**

constructor (
        vm: Component,//组件对象
        expOrFn: string | Function,//待观察的表达式
        cb: Function,//回调函数
        options?: ?Object,
        isRenderWatcher?: boolean
      ) {
        ...
        // parse expression for getter
        //1、对于计算属性，表达式即为getter
        if (typeof expOrFn === 'function') {
          this.getter = expOrFn
        } else {
          this.getter = parsePath(expOrFn)
          if (!this.getter) {
            this.getter = function () {}
            process.env.NODE_ENV !== 'production' && warn(
              `Failed watching path: "${expOrFn}" ` +
              'Watcher only accepts simple dot-delimited paths. ' +
              'For full control, use a function instead.',
              vm
            )
          }
        }
        
        if (this.computed) {
          //2、对于计算属性，创建了dep，此时没有立即进行依赖收集，
          this.value = undefined
          this.dep = new Dep()
        } else {
          this.value = this.get()
        }
      }

watcher的入参，vm表示vue对象，getter为待观察的表达式，即计算属性函数。

与user watcher相比，有两个不同的地方。

(1)、由于expOrFn 是计算属性的表达式，类型是function，所以走一个分支，将getter设置为计算属性表达式。

(2)、并没有调用get方法进行依赖收集，只是创建了dep对象，该对象保存依赖该计算属性的watcher。

计算属性的依赖关系不同于普通的属性，它即依赖于其表达式包含的普通属性，比如说本例中的属性msg，同时又被其他调用者依赖，如本例中调用computeMsg的模板表达式（\{ \{computeMsg\}\}）。本例的依赖模型如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70][]

那么问题来了，既然这些依赖关系没有在定义的时候进行收集，那是什么时候做的呢？答案就是在模板调用的时候。

计算属性的设计初衷是简化模板的表达式，避免太多的逻辑导致模板的复杂。所以，只有在模板调用的情况下才会触发依赖，如果只定义不调用，进行依赖就会造成浪费。

下面我们来介绍与模板render相关的watcher(render watcher)，并看下如何完成红色标注的依赖收集。

# 四、render watcher #

我们先回顾下第六章节介绍挂载时的mountComponent方法。

export function mountComponent (
      vm: Component,
      el: ?Element,
      hydrating?: boolean
    ): Component {
      ....
       //2、定义updateComponent，vm._render将render表达式转化为vnode，vm._update将vnode渲染成实际的dom节点
        updateComponent = () => {
          vm._update(vm._render(), hydrating)
        }
       //3、首次渲染，并监听数据变化，并实现dom的更新
      new Watcher(vm, updateComponent, noop, {
        before () {
          if (vm._isMounted) {
            callHook(vm, 'beforeUpdate')
          }
        }
      }, true /* isRenderWatcher */)
      ....
    }

当时我们说这个watcher有两个作用，1、实现首次dom渲染，并完成依赖收集。2、监听模板所包含表达式的变化，实现update。

该watcher是数据"render"模板的"桥梁"，称之为render watcher，其核心部分体现在入参expression(第二个参数，即updateComponent)。我们看下该watcher的初始化的主要过程：

constructor (
        vm: Component,//组件对象
        expOrFn  : string | Function,//待观察的表达式
        cb: Function,//回调函数
        options?: ?Object,
        isRenderWatcher?: boolean
      ) {
       ....
        if (typeof expOrFn === 'function') {//1、设置getter方法为表达式
          this.getter = expOrFn
        } else {
          .....
        }
        
        if (this.computed) {
         ....
        } else {
          //2、执行get方法，进行依赖收集
          this.value = this.get()
        }
      }

1、expOrFn为function，所以设置getter方法为表达式，即为updateComponent方法。

2、由于不是计算属性，与user watcher一样，执行get方法，实际就是执行updateComponent方法。

updateComponent = () => {
          vm._update(vm._render(), hydrating)
        }

该方法包含vm.\_render(),vm.\_update两个执行阶段，我们在第六章重点分析过，我们不再做详细介绍。今天我们重点回答前面提出的问题，如何实现依赖关系的收集。

以上面的计算属性为例，在模板中，我们使用了"\{ \{computeMsg\}\}"。

<div id="app">
       {
       {computeMsg}}
      ...
    </div>

该模板经过编译(参见前面的编译部分)后，该部分的render表达式"\_s(computeMsg)"，在执行vm.\_render时，就会触发computeMsg所设置的getter方法。

function createComputedGetter (key) {
      return function computedGetter () {
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
          //1、依赖收集，将订阅类添加到dep中
          watcher.depend()
          //2、返回值
          return watcher.evaluate()
        }
      }
    }

1、调用watcher.depend，将当前的render watcher对象添加到compteMsg的dep中，完成依赖关系的收集。

depend () {
        if (this.dep && Dep.target) {
          this.dep.depend()
        }
      }

注意这里的Dep.target指的是render watcher。依赖模型如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 1][]

2、调用watcher.evaluate()。

evaluate () {
        //如果有更新，则重新计算，否则返回缓存值
        if (this.dirty) {
          this.value = this.get()
          this.dirty = false
        }
        return this.value
      }

这是this指的是compute watcher。其get方法就是属性表达式。

function(){
          return "this is computed msg:"+this.msg
        }

由于表达式中包含了msg属性，在执行过程中，又触发msg的get监听方法，将该compute watcher 添加到msg的dep中，完成被依赖关系的收集。最终的依赖模型如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 2][]

至此，computeMsg的依赖和被依赖关系收集完成。大家也可以尝试分析下模板中调用普通属性的依赖关系收集过程。

# 五、派发更新 #

目前msg属性的dep发布器中收集了两个依赖的watcher对象，当我们重新设置msg值，会发生什呢？

当重新设置msg值，就会触发set方法。

Object.defineProperty(obj, key, {
        ...
        set: function reactiveSetter (newVal) {
          const value = getter ? getter.call(obj) : val
          /* eslint-disable no-self-compare */
          if (newVal === value || (newVal !== newVal && value !== value)) {
            return
          }
          /* eslint-enable no-self-compare */
          if (process.env.NODE_ENV !== 'production' && customSetter) {
            customSetter()
          }
          if (setter) {
            setter.call(obj, newVal)
          } else {
            val = newVal
          }
          //核心部分，通知更新
          childOb = !shallow && observe(newVal)
          dep.notify()
        }
      })

调用其发布器的notify方法。

//通知相关的watcher类更新
      notify () {
        // stabilize the subscriber list first
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update()
        }
      }

循环属性关联的watcher类，由前面可知，此时dep的sub集合中有user watcher和computed watcher两个对象。分别调用其update方法。

update () {
        /* istanbul ignore else */
        if (this.computed) {//计算属性watcher处理
          // A computed property watcher has two modes: lazy and activated.
          // It initializes as lazy by default, and only becomes activated when
          // it is depended on by at least one subscriber, which is typically
          // another computed property or a component's render function.
          //当没有订阅计算属性时，不需要计算，仅仅设置dirty为true，表示下次重新计算
          if (this.dep.subs.length === 0) {
            // In lazy mode, we don't want to perform computations until necessary,
            // so we simply mark the watcher as dirty. The actual computation is
            // performed just-in-time in this.evaluate() when the computed property
            // is accessed.
            this.dirty = true
          } else {
            // In activated mode, we want to proactively perform the computation
            // but only notify our subscribers when the value has indeed changed.
            this.getAndInvoke(() => {
              this.dep.notify()
            })
          }
        } else if (this.sync) {//同步处理，立即执行
          this.run()
        } else {//异步处理，进入堆栈
          queueWatcher(this)
        }
      }

update分为三个分支处理,我们分别对三种情况进行分析。

(1)、计算属性处理。

(2)、同步处理，立即执行。

(3)、异步处理，加入到堆栈中。

**1、计算属性**

对于计算属性的watcher对象，判断是否有订阅过该计算属性，如果没有(即该计算属性的dep的sub集合是否为空)，则设置dirty为true，下次将重新计算。

如本例中，computeMsg是被render watcher依赖，所以会进入else分支，执行getAndInvoke方法。

this.getAndInvoke(() => {
              this.dep.notify()
            })
    
    getAndInvoke (cb: Function) {
        //获取最新的值
        const value = this.get()
        if (
          //
          value !== this.value ||//值发生变化
          // Deep watchers and watchers on Object/Arrays should fire even
          // when the value is the same, because the value may
          // have mutated.
          isObject(value) ||//object对象
          this.deep//深度watcher
        ) {
          // set new value
          //更新值
          const oldValue = this.value
          this.value = value
          this.dirty = false
          //执行回调函数
          if (this.user) {
            try {
              cb.call(this.vm, value, oldValue)
            } catch (e) {
              handleError(e, this.vm, `callback for watcher "${this.expression}"`)
            }
          } else {
            cb.call(this.vm, value, oldValue)
          }
        }
      }

该方法核心部分是执行传入的回调cb方法，即this.dep.notify()，此时递归调用render watcher的update，又回到了update方法。

**2、同步处理**

如果不是计算属性(本例中的user watcher，render watcher)，并设置了同步处理，则调用run方法。如：

run () {
        if (this.active) {
          this.getAndInvoke(this.cb)
        }
      }

run方法调用getAndInvoke，该方法核心部分是：

(1)执行get方法获取value，对于render watcher ，执行updateComponent方法，重新生成Vnode，并patch，实现dom的更新(下一章节将详细说明)。

(2)回调cb方法，如本例中的msg的watch表达式(注意：render watcher的cb是noon)

**3、异步处理**

对于非同步，则调用queueWatcher将watcher压入堆栈中。在将这个方法之前，我们先看如果更新queue中的watcher，即flushSchedulerQueue方法，在src/core/observer/scheduler.js中

function flushSchedulerQueue () {
      //1、设置标识位flush为true，标识正在刷新中
      flushing = true
      let watcher, id
    
      // Sort queue before flush.
      // This ensures that:
      // 1. Components are updated from parent to child. (because parent is always
      //    created before the child)
      // 2. A component's user watchers are run before its render watcher (because
      //    user watchers are created before the render watcher)
      // 3. If a component is destroyed during a parent component's watcher run,
      //    its watchers can be skipped.
      //2、将queue数组从小到大排序
      queue.sort((a, b) => a.id - b.id)
    
      // do not cache length because more watchers might be pushed
      // as we run existing watchers
      //3、循环队栈queue，执行watcher.run方法，实现更新。
      for (index = 0; index < queue.length; index++) {
        watcher = queue[index]
        if (watcher.before) {
          watcher.before()
        }
        id = watcher.id
        has[id] = null
        watcher.run()
        // in dev build, check and stop circular updates.
        if (process.env.NODE_ENV !== 'production' && has[id] != null) {
          circular[id] = (circular[id] || 0) + 1
          if (circular[id] > MAX_UPDATE_COUNT) {
            warn(
              'You may have an infinite update loop ' + (
                watcher.user
                  ? `in watcher with expression "${watcher.expression}"`
                  : `in a component render function.`
              ),
              watcher.vm
            )
            break
          }
        }
      }
    
      // keep copies of post queues before resetting state
      const activatedQueue = activatedChildren.slice()
      const updatedQueue = queue.slice()
      //4、重置相关的状态
      resetSchedulerState()
    
      // call component updated and activated hooks
      callActivatedHooks(activatedQueue)
      callUpdatedHooks(updatedQueue)
    
      // devtool hook
      /* istanbul ignore if */
      if (devtools && config.devtools) {
        devtools.emit('flush')
      }
    }

我们看下核心的步骤:

(1)设置标识位flush，表示queue正在处理中。

(2)根据queue中的watcher的id，从小到大进行排序(也就是创建的先后)

(3)循环queque中的watcher，执行run方法，实现更新。

(4)queue中的执行完成后，则重置相关的状态，包括flush，wait等，等待下一次执行。

整个处理过程还是比较清晰的，这里注意一点，在第3步中，queue是可能动态变化的。

现在回过头来，继续看queueWatcher，是如何将watcher加入到queue中，又是如何触发flushSchedulerQueue执行的。

export function queueWatcher (watcher: Watcher) {
      const id = watcher.id
      if (has[id] == null) {//对于同一个watcher，不会重复加入到queue，避免多次触发
        has[id] = true
        //1、将watcher加入队列中
        if (!flushing) {//尚未刷新，则加入队栈，待执行
          queue.push(watcher)
        } else {//2、正在刷新中，则动态的插入到到对应位置。
          // if already flushing, splice the watcher based on its id
          // if already past its id, it will be run next immediately.
          let i = queue.length - 1
          //从后往前，查找对应位置
          while (i > index && queue[i].id > watcher.id) {
            i--
          }
          queue.splice(i + 1, 0, watcher)
        }
        // queue the flush
        //3、通过nexttick执行queue中的watcher
        if (!waiting) {
          waiting = true
          nextTick(flushSchedulerQueue)
        }
      }
    }

将watcher加入queue队栈中，分两种情况，

(1) flushSchedulerQueue未执行，则将watcher加入到queue即可，待下一次执行。

(2)flushSchedulerQueue执行中，则从后往前查找对应的位置，然后插入到queue。

(3)通过nextTick，调用flushSchedulerQueue，实现queue中watcher的更新。vue的DOM是异步更新的，nextTick确保了在DOM更新后再执行，在这里可以认为下一个事件循环的"tick"。nextTick机制实现了"批量"的更新，效率更高。

这里要注意，对于同一个watcher，不能重复的加入到queue中，避免多次触发。

# 六、总结 #

本章节的逻辑还是比较复杂。我们将各个方法间的调用关系总结下，便于大家理解。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 3][]

[20190615094037856.png]: /images/20220127/b8495e8e74ba483eaf0aabb59be9a1ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70]: /images/20220127/5a72c8e2e69d4c609cbf260754bc836a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 1]: /images/20220127/34f40a65ee1946288f3c0f53a473f51b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 2]: /images/20220127/9a1ae6fa9df04b589c3ebc9392d08d1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 3]: /images/20220127/dfb7e59da6b14912b4a8156a4c960e29.png