Vue.js 源码分析-模板编译和组件-part2

绝地灬酷狼 2022-10-26 12:47 142阅读 0赞

# 模板编译介绍 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
h函数最终会调用vm.$createElm生成Vnode  
![在这里插入图片描述][20210207214033536.png]  
webpack是通过vue-loader进行转换的

*  运行时编译，必须使用完整版的vue，体积大运行慢
 *  构建时编译，vue-cli的项目用的是vue运行时，会在构建时编译，体积小速度快

# 体验模板编译的结果-上 #

<body>
      <div id="app">
        <h1>Vue<span>模板编译过程</span></h1>
        <p>{ {  msg }}</p>
        <comp @myclick="handler"></comp>
      </div>
      <script src="../../dist/vue.js"></script>
      <script>
        Vue.component('comp', { 
          template: '<div>I am a comp</div>'
        })
        const vm = new Vue({ 
          el: '#app',
          data: { 
            msg: 'Hello compiler'
          },
          methods: { 
            handler () { 
              console.log('test')
            }
          }
        })
        console.log(vm.$options.render)
      </script>
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]  
render.js中renderMixin调用了installRenderHelper

此函数给vue添加了很多渲染方法  
![在这里插入图片描述][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]

# 体验模板编译的结果-下 #

传入的render的核心就是调用了\_c函数，最后生成vnode返回。  
观察下面四个参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]

## 观察 children 参数 ##

其中children中的\_m(0) 对应h1，因为h1是静态内容（静态内容会做优化处理），没有插值表达式和指令  
![在这里插入图片描述][20210207221139176.png]  
2 \_v 创建空白文本节点  
![在这里插入图片描述][20210207221316648.png]  
3 \_c 创建p的vnode  
这里需要注意的是，当前p标签里面只有纯文本的内容，如果是自己写的render函数，会在第二个参数的位置传入文本节点的内容，那么createElm内部调用normalizechidlren转换成数组包裹的文本vnode节点返回，而编译生成的render函数这里直接就是数组形式（数组包裹的文本vnode），比自己手写的render函数少了一步处理过程，这样性能更好，之后自己手写render函数也可以这么写，性能会更好，这就是通过学习源码可写出性能更高的代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]其中\_s(msg) 是把用户输入的数组转换成字符串

4 最后创建自定义组件vnode  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]

# Vue Template Explorer #

把html模板转换成render函数  
template-explorer.vuejs.org/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]  
尝试多加几个换行，注意这里option是原封不动编译  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]  
这些换行对展示没用只会占用内存，所有写代码的时候尽量少换行。

vue3版本  
做了优化，有换行也不会编译出来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][20210207223029167.png]  
这段好像没啥用可跳过。。

# 模板编译的入口 #

完整版vue的入口文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]  
compileToFunctions是在web/compile/index定义，由createCompiler生成  
![在这里插入图片描述][20210207232329758.png]  
createCompiler传入了web相关的选项。  
baseOptions中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]  
观察baseOptions中的moudule和directive  
mudole处理类样式和行内样式以及vmodel等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]  
指令，这里处理的都是模板中的指令  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]  
回到web/compile/index中，进入createCompile函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]createCompile这个函数又是通过一个函数返回的，createCompileCreator做了三件事  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]  
进入createCompileCreator，createCompile定义了一个compile函数，接受模板和用户传递的选项（和createCompile中的baseOption合并），然后调用baseCompile把合并后的option给他  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]  
最后创建compileToFunction函数，compileToFunction也是通过一个函数创建的，是我们的**模板编译入口**  
![在这里插入图片描述][20210207233150928.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]  
compileToFunctions函数中

compileToFunctions-把模板编译成函数  
compileToFunctions在craeteCompiler中定义  
craeteCompiler又由createCompilerCreatot生成，createCompilerCreatot结束模板和合并后的选项，其中baseCompiler是编译的核心函数，做三件事，解析语法树，优化语法树，生成字符串形式的JS代码，最后返回craeteCompiler函数。  
craeteCompiler中定义了compile函数，接受模板和用户传入的选项，传给baseCompiler然后生成**compilerTofunction函数也就是我们编译的入口函数**，compilerTofunction是通过createcompilerTofunction方法返回的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]

# 模板编译过程-compileToFunctions #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]  
createCompileCreator返回createCompile，createCompile返回compile和compileToFunction（compileToFunction是有createcompileToFunction）

先看compileToFunctions入口  
createcompileToFunction中，  
![在这里插入图片描述][20210207233905337.png]  
createcompileToFunction做了一下事情  
1clone option  
![在这里插入图片描述][20210207234027826.png]  
2判断是否有缓冲  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]

3开始编译，然后返回对象 \{render, staticRenderFns\},此时的render存的是js字符串形式  
![在这里插入图片描述][20210207234342869.png]  
4最后调用createFunction把js字符串的代码转成fn  
![在这里插入图片描述][20210207234545683.png]  
进入createFunction，用new Fn的时候，如果失败还会进行错误收集  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 22]  
回到上一步  
5  
![在这里插入图片描述][2021020723471526.png]总结：核心就是判断是否有缓存，没有就编译，然后把js字符串代码转成fn然后缓存并返回。

# 模板编译过程-compile #

在模板编译入口中最终的编译调用了compile函数，看看它做了啥  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 23]  
接下来调用baseCompile，也就是模板编译的核心函数，baseCompile把模板编译成render函数，最后返回一个包含俩个成员的对象1render函数和staticRenderFunctions此时的render还是字符串的函数。  
![在这里插入图片描述][20210207235418676.png]  
总结  
合并选项，调用baseCompile进行编译，最后记录错误返回编译好的对象。

# 模板编译过程-baseCompile-AST #

baseCompile主要做了三件事

把模板转换成 ast 抽象语法树  
优化抽象语法树  
把抽象语法树生成字符串形式的 js 代码

export const createCompiler = createCompilerCreator(function baseCompile (
      template: string,
      options: CompilerOptions
    ): CompiledResult { 
      // 把模板转换成 ast 抽象语法树
      // 抽象语法树，用来以树形的方式描述代码结构
      const ast = parse(template.trim(), options)
      if (options.optimize !== false) { 
        // 优化抽象语法树
        optimize(ast, options)
      }
      // 把抽象语法树生成字符串形式的 js 代码
      const code = generate(ast, options)
      return { 
        ast,
        // 渲染函数
        render: code.render, //此时的render是字符串形式
        // 静态渲染函数，生成静态 VNode 树
        staticRenderFns: code.staticRenderFns
      }
    })

## 什么是抽象语法树 ##

![在这里插入图片描述][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]  
使用 astexplorer.net 了解如何解析的，其中type1是标签3是文本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 26]  
接下来分析parse过程

# 模板编译过程-baseCompile-parse #

parse是把模板字符串转换成ast对象  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 27]

## parse内部 ##

![在这里插入图片描述][20210225220044969.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 28]  
上面四个方法，解析开始标签和结束标签，以及文本内容和注释标签

## parseHTML中 ##

直接看src/compiler/parse/index注释都写了  
核心就是解析html模板字符串，然后返回ast对象，过程中把一些解析的属性例如if等记录到对象里。

# 模板编译过程-baseCompile-optimize #

直接看src/compiler/optimizer注释都写了  
核心：优化抽象语法树》标记静态节点，这样就不会进行处理了

# 模板编译过程-generate-上 #

把优化好的ast对象转换成字符串js代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 29]  
直接点进去看 观察每一个方法，都写注释了

# 模板编译过程-generate-下 #

静态根节点的处理  
![在这里插入图片描述][20210228120601407.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 30]

静态节点不会发生变化，所以不进行patch。

# 模板编译过程-调试 #

模板编译 = 1把模板转换成ast对象，2进行优化（优化的过程就是标记静态根节点），3然后转换成字符串代码，最后通过new Function转换成匿名函数生成render函数返回。

开始调试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 31]

打断点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 32]  
这里使用模板作为key看是否有缓存，是否有编译好的渲染函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 33]  
首次执行所有没有，继续执行，调用compile函数 f11 进入  
![在这里插入图片描述][2021022812163272.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 34]  
进入模板编译核心，baseCompile 做了三件事。  
跳过函数执行看结果，此时的ast还没有static属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 35]  
执行完优化函数后，有static属性了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 36]  
执行完generate后获得字符串代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 37]  
继续执行到create-compiler中最后进入createCompileToFunctionFn  
![在这里插入图片描述][2021022812262768.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 38]  
to-function.js中 最后把生成结果缓存后返回  
![在这里插入图片描述][20210228122800845.png]  
最后回到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 39]

# 模板编译过程-总结 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 40]  
少写空白和换行，因为这一些也会被解析成ast存到内存中。  
最后调用$mount 》 mountComponent 》 new Watcher （传入vm.\_update(vm.\_render(), hydrating)）》get 》 value = this.getter.call(vm, vm) 》 页面渲染 》 callHook(vm, ‘mounted’)

# 组件化回顾 #

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

# 组件注册 #

Vue.component实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 42]

export function initAssetRegisters (Vue: GlobalAPI) { 
      /** * Create asset registration methods. */
      // 遍历 ASSET_TYPES 数组，为 Vue 定义相应方法
      // ASSET_TYPES 包括了directive、 component、filter
      ASSET_TYPES.forEach(type => { 
        Vue[type] = function (
          id: string,
          definition: Function | Object
        ): Function | Object | void { 
          if (!definition) { 
            // 如果未定义找到之前定义好的返回
            return this.options[type + 's'][id]
          } else { 
            /* istanbul ignore if */
            if (process.env.NODE_ENV !== 'production' && type === 'component') { 
              validateComponentName(id)
            }
            // Vue.component('comp', { template: '' })
            // 判断是否组件 isPlainObject 是否原始对象 
                                              // export function isPlainObject (obj: any): boolean { 
                                              // return _toString.call(obj) === '[object Object]'
                                              // } 
            if (type === 'component' && isPlainObject(definition)) { 
              definition.name = definition.name || id //有名字则用，没有则用id命名
              // 把组件配置转换为组件的构造函数
              definition = this.options._base.extend(definition) //this.options._base = vue extend把对象转换成组件构造函数
            }
            // 如果是指令，俩种情况，第一种如果是对象直接执行最后一句，第二种函数进入if分支
            if (type === 'directive' && typeof definition === 'function') { 
                // 这里的bind和update 是方法
              definition = {  bind: definition, update: definition }
            }
            // 全局注册，存储资源并赋值
            // this.options['components']['comp'] = definition
            this.options[type + 's'][id] = definition //如果直接传组件构造函数会直接执行这句话
            return definition
          }
        }
      })
    }

component核心： // 把组件配置转换为组件的构造函数  
definition = this.options.\_base.extend(definition) //this.options.\_base = vue extend把对象转换成组件构造函数

# Vue.extend #

如果Vue.component第二个传的是对象参数，会调用extend转换为组件的构造函数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 43]  
核心：继承vue的原型，初始化一系列vue的初始化时间，返回组件的构造函数。

# 调试组件注册过程 #

断点

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 44]  
进入extend方法  
![在这里插入图片描述][20210228151444883.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 45]  
此时super中只有这些  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 46]  
传入的选项中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 47]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 48]  
合并中的对象也可以访问\_base,所有vue选项中的成员可以在任何组件使用。  
缓存当前组件任何返回。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 49]  
因为记录到了vue的构造函数中，则可以全局使用组件

# 组件的创建过程 #

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 51]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 52]  
vnode = createComponent(tag, data, context, children)中  
installComponentHooks函数中的init方法初始化了组件对象、  
核心  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 53]  
最终把组件转换成vnode对象。  
其中init的函数是在patch过程中调用的。

# 组件的 patch 过程 #

core/vdom/patch.js  
patch 》createElm （转换真实dom）》 createComponent 》createComponent 中调用hook中的init函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 54]  
init函数中调用createComponentInstanceForVnode中调用构造函数，创建组件对象  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 55]  
回到之前的构造函数中的init方法，  
![在这里插入图片描述][20210228165437437.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 56]  
执行initInternalComponent方法 （注意记录opt选项）

继续执行到initLifecycle函数（记录父子关系）》 initLifecycle 中（拿到父组件，把当前组件放入$children数组中）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 57]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 58]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 59]  
setActiveInstance restoreActiveInstance是处理组件嵌套的问题，例如 abc三个组件 先a的update执行任何setActiveInstance 把a作为父组件 》 a.update pathc的时候 》 b组件创建 此时把bsetActiveInstance 以此类推这样就可以弄清组件关系了。

继续回到initjs方法中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 60]  
回到createComponentjs中  
$mount是创建完组件后调用，任何继续执行渲染过程，但还没挂载，因为只是创建了vnode，在patch 的createConponent函数中才挂载dom。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 61]  
createConponent中，注意这里先挂载子组件后挂载父组件，因为createComponent中会执行子组件的创建一系列过程，如果又调用patch方法又会触发子组件一系列创建过程。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 62]  
组件的创建过程》父》子  
挂载过程，先子》父  
所以组件的粒度不是越细越好，因为嵌套一层组件就会多一层创建过程，这样会加多重复创建过程。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221024/7574b0ee82734f289cfc938ad198efb6.png
[20210207214033536.png]: /images/20221024/3896881ad1394256a4134f775f624901.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/ffb37a212d4a46028bf876ac21fae123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/693f98b8d21a4d429f5fe790f8c3e354.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/fbbfe80421f64780b19a01948eaa0e95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/4f46cf8f9be84e469c5bac09cf497dc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/0d5eac2e516d46379712117630756370.png
[20210207221139176.png]: /images/20221024/8a2b31e21582459b9e98400107db4b07.png
[20210207221316648.png]: /images/20221024/6ab4db5cfade4e7f960917ed3905300e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/8806af29a5e94e9fbd85e3792f8ee5b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/86222f536b514585996122f94d25175e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/87c13a9c24b54f06900f1eb16290a7be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/c048c4f0d38e450b9b19e27d9e5b2081.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/e2353e21624d48ea88de74870f624dcd.png
[20210207223029167.png]: /images/20221024/20fc57493d4c45f4975b313e9a793beb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/9464f6e8bee844c68a179f5438eefa00.png
[20210207232329758.png]: /images/20221024/40d348db31934028ac8828c6cc529fc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/d5114cdc190e4ed2bcf880260545f440.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/381d913f0c7743bf84313e6e42107c44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]: /images/20221024/4bc865bfd807458dae47259f36e611e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]: /images/20221024/d04ee9ec40ff46afb8aad97644982acf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]: /images/20221024/a8eb9b5146ed470f842a33ad9eb90f84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]: /images/20221024/114daef8c416410983c340e6a7440072.png
[20210207233150928.png]: /images/20221024/8784f2a43572477593d63d6d88d63c7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]: /images/20221024/0fcaf9ecea45414e871bce2446a7489e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]: /images/20221024/74de5e01a83047358d1af407889a14be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]: /images/20221024/c908e314d8a1447394967505e895f480.png
[20210207233905337.png]: /images/20221024/e739da341891447b93815b3e3827c2fe.png
[20210207234027826.png]: /images/20221024/e0143bff8fa54b8983c73c3626e37e9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]: /images/20221024/42e30d58530f47a28194bb8e73d1df97.png
[20210207234342869.png]: /images/20221024/f6bb626f0101433d867225c8638cf375.png
[20210207234545683.png]: /images/20221024/bcd1c10e930449d0b3a3de7d2bc324fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 22]: /images/20221024/f6314eee3bbb4623b56440669e89ee82.png
[2021020723471526.png]: /images/20221024/de17aea1ca0b43c088542e12a2866b54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 23]: /images/20221024/dafa1186cb7941e9a19629f26b257b6c.png
[20210207235418676.png]: /images/20221024/4016dd57454b438c8df6b21d388dfcdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 24]: /images/20221024/62c4d45d607e4064b76a8a516da743e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 25]: /images/20221024/c882ff09593e4fe3b384dd6010f312a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 26]: /images/20221024/8311a5e0864c4fea823a945fef10c5ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 27]: /images/20221024/a382666eaf3d4a52b1b6e147b7046fe8.png
[20210225220044969.png]: https://img-blog.csdnimg.cn/20210225220044969.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 28]: /images/20221024/107446f367764352a584276db2702ce9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 29]: /images/20221024/661320d63edc4445b5ceb76f40338c71.png
[20210228120601407.png]: /images/20221024/0b6dc4ae4e9342ca81ce5022d4270f90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 30]: /images/20221024/6175eda1b9fc47dcbdb1c7696d0564f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 31]: /images/20221024/aab6ce37bb864369befb92b8c0fc2558.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 32]: /images/20221024/89333c448c4742afa3e8be92d4828cfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 33]: /images/20221024/b19d095230e847918e87c6727c65760c.png
[2021022812163272.png]: /images/20221024/3cd1208900d64178aac85eb5bd729dea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 34]: /images/20221024/cbd91b453f2e4aaeae026423a26ace21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 35]: /images/20221024/c5276abd651148ae88e18a7468713ec1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 36]: /images/20221024/2321ceb75fba458ab8be4c5f97f52d2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 37]: /images/20221024/45217aa6fe064f8aafc6217546a8fc8c.png
[2021022812262768.png]: /images/20221024/39e3c2da5b8241ce976fe901bc4a6feb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 38]: /images/20221024/cd45e0d5110942c1a0fdcfab4dd23148.png
[20210228122800845.png]: /images/20221024/82a5a0cb6e214b4badba82b4cf2bd007.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 39]: /images/20221024/448ce346477744b890e8f8ccfdf9c6d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 40]: /images/20221024/f708594dabaa453c99356f12de47e7e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 41]: /images/20221024/e7e78936448d421a9cfe15d1c8ce1dd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 42]: /images/20221024/49225aa1669146938e93644838b533c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 43]: /images/20221024/1e40690e233740018ffc67f5b728c878.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 44]: /images/20221024/04e804d80f33409abee9be054942f9f3.png
[20210228151444883.png]: /images/20221024/4fefcb32befb462c917417ecc98d919f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 45]: /images/20221024/38f4b8071d084a9ab7abcc141b881d99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 46]: /images/20221024/e47a66f79c7c4cce95972d0ab9fae3c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 47]: /images/20221024/e68e02bd6a2b495ebd3927bcfb272b89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 48]: /images/20221024/7344427df5874cbcbc086dbd94d630e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 49]: /images/20221024/ff15b354b2ba4ad7b239d1d1159efffd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 50]: /images/20221024/f2a61eab7cb1466a9c80a14a34cf3b4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 51]: https://img-blog.csdnimg.cn/2021022815245884.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 52]: /images/20221024/4510ec1591c146b9bfc9c63f24d3f4f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 53]: /images/20221024/b514ef1e0dd144da98b5ec003682d3a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 54]: /images/20221024/99c4781ab4b04b0ab9a4c5f99c4a2097.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 55]: /images/20221024/4cda639a62e34429afe71f2fcaa75517.png
[20210228165437437.png]: /images/20221024/9edf2240c4ad4936992253aa41db4cab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 56]: /images/20221024/0cb112807eda469a93731955884c2ff1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 57]: https://img-blog.csdnimg.cn/20210228165918228.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 58]: https://img-blog.csdnimg.cn/20210228170059952.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 59]: /images/20221024/7e93dce1a9a343b8a79677b61b011d8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 60]: /images/20221024/22d790e24f6b40dd8669116097050f36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 61]: /images/20221024/568f858c65be40438fe194f5a668f8a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 62]: /images/20221024/84aab80a30144aaf9e081cc9301a994e.png