手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Vue-Router 原理实现

系统管理员 2022-12-27 04:41 112阅读 0赞

# 介绍 #

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

# Vue Router 基础回顾-使用步骤 #

![在这里插入图片描述][20201207213243448.png]  
在main种导入刚刚创建好的router  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20201207213438187.png]

## 创建vue实例的时候创建vue-router的作用 ##

打印一下，没有注册和注册了的vue实例区别  
![在这里插入图片描述][20201207213549426.png]  
![在这里插入图片描述][20201207213607135.png]  
注释这行代码，运行  
![在这里插入图片描述][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]  
注入了route和router属性。route存了路由规则。router相关方法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]  
总结1.创建组件视图2注册插件3创建ruote对象，注册route对象4，route-view占位，当路由匹配成功会把route-view替换掉

# 动态路由 #

![在这里插入图片描述][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]  
从url获取props

# 嵌套路由 #

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

# 编程式导航 #

有push replace go三种方法  
![在这里插入图片描述][20201207215722588.png]  
replace方法不会记录本次历史![在这里插入图片描述][20201207215816596.png]  
传参  
![在这里插入图片描述][20201207215829302.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]  
先演示replace，现在前后都是灰色的  
![在这里插入图片描述][20201207215914661.png]  
跳转登录页面，此时后退按钮依然不能点击  
![在这里插入图片描述][20201207215947705.png]  
点击push后 后退按钮可以点击了

![在这里插入图片描述][20201207220016205.png]  
长按显示  
![在这里插入图片描述][20201207220029296.png]

# Hash 模式和 History 模式的区别 #

不管那种模式都是客户端实现的方式，也就是路径方式变化不向服务器发生请求，是根据js监听变化根据不同的地址渲染不同内容。

--------------------

## 表现形式的区别 ##

hash模式后面带\# 后面跟的是地址 通过?带参

history是正常的url，但需要服务端支持

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

## 原理的区别 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]  
pushState和push方法区别，history.push路径发生变化向服务器方式请求，pushState不会请求，改变地址然后记录（实现客户端路由）。

# History 模式 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]  
看看demo项目route结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]  
注意，vue-cli可以做好了对history的支持，所以无法演示之前说的问题。

点击video，刷新页面，这时会发生请求，如果页面不存在会返回404，但在这里没有看到，因为刚刚也说了cli配置好了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]

# History 模式 - Node.js #

打包部署服务器

1.  把dist复制到web文件夹
2.  运行backend文件夹种的app  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_colvue-or_FFFFFF_t_70]  
    先演示不注册history的话，浏览器会有什么问题  
    点击每个vue-link的时候会调用history的pushState api（改变地址并保存，不发送请求）。  
    此时刷新浏览器，发生了请求  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]  
    但node中没有配置这个地址，所以返回这个页面。

配置history支持，重启 node app.js  
![在这里插入图片描述][20201207221839440.png]  
ok了（工作原理就是服务器会判断，如果没有这个页面就默认返回index.html），浏览器收到这个页面后再次去判断这个地址去渲染  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]

# History 模式 - nginx #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][20201207222042475.png]  
启动nginx 然后把dist内容拷贝到这里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]  
和刚刚一样，点击没事，刷新就404了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]  
配置一下就好了

$uri是当前请求的路径 如果找到对应文件就返回，如果没有就返回 /index.html  
![在这里插入图片描述][20201207222433808.png]  
重启

刷新，OK问题解决  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]  
总结，俩中方法都是利用 找不到就返回index的方法，然后浏览器根据拿到的index再去判断地址然后加载渲染。

# VueRouter 实现原理 #

这里用history模式模拟。  
会用到这些内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]  
![在这里插入图片描述][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]  
pushState改变地址栏，并且保存历史，不请求。  
popstate事件可以记录改变后的地址，注意pushState和replaceState不触发该事件（点击浏览器前进后退或history.back方法会触发），最后根据对应地址加载组件渲染。

# VueRouter 模拟实现-分析 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 23]  
创建route类，里面有install静态方法  
类图就描述所以属性和成员  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 24]  
类图三部分，类名 类属性 类方法

1.  options：记录构造函数传入对象
2.  routeMap：对象，用于记录路由组件和路由地址的对应关系，将来会把路由规则解析到routeMap里。  
    3.data:一个对象，利用current属性，记录当前路由地址，data对象必须是响应式的，变化后做出相应执行。  
    4.install实现vue的插件机制  
    5.init调用下面三个方法  
    6.initEvent注册popState事件 监听浏览器历史变化  
    7.createRouteMap :初始化routemap属性，把构造函数中传递的路由规则转换成键值对存到8.routeMap，键路由地址，值是对应组件（route-view组件中会使用到routeMap）  
    9.initComponents:创建route-view和route-link组件的

# VueRouter-install #

创建一个新的vue项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 25]

# VueRouter-构造函数 #

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

# VueRouter-createRouteMap #

![遍历所有路由规则，存起来][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 27]

# VueRouter-router-link #

实现initComponents方法，先创建俩个组件，route-view和route-link

1.把route-link的内容渲染到a标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 28]  
2.初始化方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 29]  
3.使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 30]  
4.修改route index的 import，改成自己的  
![在这里插入图片描述][20201208214249642.png]  
run serve  
报错了  
![在这里插入图片描述][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]  
编译器把模板转成render函数（创建虚拟dom，渲染到页面），所以速度不如运行时版本。cli默认创建的是运行时的。

# VueRouter-完整版的 Vue #

创建vue.config.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 33]  
重启run serve  
第一个问题解决了，而且也输出了div  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 34]

# VueRouter-render #

运行时版本不支持模板编译，编译器的作用是负责把template编译成render函数。

运行时版本可直接写render函数。平常的单组件文件的template能正常使用是因为打包过程中把template编译成了render函数，这叫预编译。

演示使用render  
先演示不使用编译器  
删除vue配置文件 run serve  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 35]  
刷新浏览器 ok  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 36]  
**总结** 运行时的组件不支持template，需要自己写render函数，完整版把template帮我们编译成render函数。

# VueRouter-router-view #

根据当前地址，拿到组件，渲染到router-view的位置  
h函数创建虚拟dom（还可以把组件转换成虚拟dom）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 37]  
重启，点击about标签后失败，浏览历闪了一下，这里向服务器发了请求  
解决：1注册点击时间阻止后续操作，2把href的地址修改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 38]  
重启，点击成功（点击后没有刷新，也就是没有发请求）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 39]  
其实还有点问题，下面演示

# VueRouter-initEvent #

点击浏览器前进和后退，url遍历，组件没变  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 40]  
也就是退后和前进没有代码处理。  
解决：点击前进或后退，历史发生变化的时候加载当前url的组件。

popState就是监听这个的  
1拿到url，然后存到data.current中  
![在这里插入图片描述][20201208222749687.png]  
2调用  
![在这里插入图片描述][20201208222802142.png]  
问题解决。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 41]

# 完 #

let _Vue = null
    
    export default class VueRouter { 
      static install(Vue) { 
        //1 判断当前插件是否被安装
        if (VueRouter.install.installed) { 
          return
        }
        VueRouter.install.installed = true
        //2 把Vue的构造函数记录在全局
        _Vue = Vue
        //3 把创建Vue的实例传入的router对象注入到Vue实例
        // _Vue.prototype.$router = this.$options.router
        _Vue.mixin({ 
          beforeCreate() { 
            if (this.$options.router) { 
              _Vue.prototype.$router = this.$options.router
              this.$options.router.init()
            }
          }
        })
      }
    
    
      // 传入routes
      constructor(options) { 
        this.options = options
        // 存路径和对应组件
        this.routeMap = { }
        // 响应式data 发生变化后渲染对应组件
        this.data = _Vue.observable({ 
          current: "/"
        })
        this.init()
      }
      createRouteMap() { 
        this.options.routes.forEach(route => { 
          this.routeMap[route.path] = route.component
        })
      }
    
      initComponent(Vue) { 
        // 创建a标签
        Vue.component('router-link', { 
          props: { 
            to: String
          },
          // 因为运行时不带编译器用render函数代替
          render(h){ 
            return h('a',{ 
              attrs: { 
                href:this.to
                },
               on: { 
                 click:this.clickHandler
               }
              // 默认插槽
              },[this.$slots.default])
          },
          methods: { 
            clickHandler (e){ 
              // 只改变地址不请求
              history.pushState({ },'',this.to)
              // 修改当前url
              this.$router.data.current = this.to
              // 禁用默认跳转
              e.preventDefault()
            }
          }
        })
    
        const self = this
        Vue.component('router-view', { 
          render(h){  
            // 拿到url对应组件
            const component = self.routeMap[self.data.current]
            return h(component)
          }
        })
      }
      
      init() { 
        // 遍历路由
        this.createRouteMap()
        // 初始化对应组件
        this.initComponent(_Vue)
        // 监听前后退url变化后加载对应组件
        this.initEvent()
      }
      initEvent (){ 
        // 解决点击退后和前进url变化不渲染问题
        // popstate监听url变化
        window.addEventListener('popstate',()=>{ 
          this.data.current = window.location.pathname
        })
      }
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221120/3cfa1bb82ee0467e9427f43df62ca2db.png
[20201207213243448.png]: /images/20221120/50a65fe9d199407cb8b1cfbff47616cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/5445bddcd2714fbb890e1648076ac033.png
[20201207213438187.png]: /images/20221120/3af9c48ad4db41a2b1117013d05f4990.png
[20201207213549426.png]: /images/20221120/352c356d903142f98a049aedcf3a28c8.png
[20201207213607135.png]: /images/20221120/8b4e2343b63a47ac949b8e7823e3f6df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/90f555be5632411ba4f60e70ec12ba81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/b60ae51174394d7db830af48192f559c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: /images/20221120/2939defe73aa46789596114fbf33540c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]: /images/20221120/30cda9a8b14d4ca39527fc36c1449174.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]: /images/20221120/3967f089beba4134b0d8fa8bd7ce8fbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]: /images/20221120/f34aed7736d14fe2b5c647f8dbaf4690.png
[20201207215722588.png]: /images/20221120/bcf56f974cac4e77939ca8fa6db227c8.png
[20201207215816596.png]: /images/20221120/9f476b08fd1f4f408c02caf43d3a3686.png
[20201207215829302.png]: /images/20221120/28b7c03ad0c94112b3f4604cc8ca6604.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]: /images/20221120/362d6538ca6f4dfe9de3e8b5076ada68.png
[20201207215914661.png]: /images/20221120/a777cbdc2c3d4c6d8bc2d12f535e88fa.png
[20201207215947705.png]: /images/20221120/2adcd27c64ea49b4b212974c4e9137bb.png
[20201207220016205.png]: /images/20221120/0d974504de724470ae2ab11d3f745e17.png
[20201207220029296.png]: /images/20221120/617904a8d55e4bc8b487ff5b79dc5148.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]: /images/20221120/0a0a24a80f3a498e8c5e8a15203a726b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]: /images/20221120/19eae623db404930ab826fe78c9f1a8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]: /images/20221120/5177f3b425fa41f8a92ee7723320fde5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]: /images/20221120/f0c90775c50d4ddab97fdefa1f617890.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]: /images/20221120/2160d4bdd5084c7ba6f797154d99c468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_colvue-or_FFFFFF_t_70]: /images/20221120/96f18ad60cae4593b1025725a3654cbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]: /images/20221120/5043767bec5e4424ab2ca9084fbb2277.png
[20201207221839440.png]: /images/20221120/344f74505dfe4375a0a10fcb69d7736a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]: /images/20221120/5eaa889c734a495a93412efa241c8fd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]: /images/20221120/0dead73df41c4a1ba1e517caebc114d6.png
[20201207222042475.png]: /images/20221120/6abbc89e4be9494b9e30696d256ba6cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]: /images/20221120/0b6d45a1dd2541dc826f9e3c4e7987f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]: /images/20221120/f01ee69512a04f948cbfb86fa19ea870.png
[20201207222433808.png]: /images/20221120/bf3bc84a5d444bf7bd56dd7af36aedd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]: /images/20221120/ea476651646f4280b33577945cf820be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]: /images/20221120/bf5f08b99d9840a3bfd05df49bf6955f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20201207222843716.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 22]: https://img-blog.csdnimg.cn/20201207222950746.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 23]: https://img-blog.csdnimg.cn/20201207223353703.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 24]: https://img-blog.csdnimg.cn/20201207223606658.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 25]: https://img-blog.csdnimg.cn/20201208212206858.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 26]: https://img-blog.csdnimg.cn/20201208213004810.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]: https://img-blog.csdnimg.cn/20201208213536836.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 28]: https://img-blog.csdnimg.cn/2020120821404575.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 29]: https://img-blog.csdnimg.cn/20201208214149346.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 30]: https://img-blog.csdnimg.cn/20201208214214248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[20201208214249642.png]: https://img-blog.csdnimg.cn/20201208214249642.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 31]: https://img-blog.csdnimg.cn/20201208214333467.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 32]: https://img-blog.csdnimg.cn/20201208214340943.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 33]: https://img-blog.csdnimg.cn/20201208214922955.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 34]: https://img-blog.csdnimg.cn/20201208214913364.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 35]: https://img-blog.csdnimg.cn/20201208220045868.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 36]: https://img-blog.csdnimg.cn/20201208215803649.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 37]: https://img-blog.csdnimg.cn/20201208221152839.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 38]: https://img-blog.csdnimg.cn/20201208222214632.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 39]: https://img-blog.csdnimg.cn/20201208222307748.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 40]: https://img-blog.csdnimg.cn/20201208222523256.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[20201208222749687.png]: https://img-blog.csdnimg.cn/20201208222749687.png
[20201208222802142.png]: https://img-blog.csdnimg.cn/20201208222802142.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 41]: https://img-blog.csdnimg.cn/20201208222817742.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70