JavaScript高级面试题（6）

﹏ヽ暗。殇╰゛Y 2021-10-23 09:47 388阅读 0赞

**1.本章主要内容**

jQuery和使用框架的区别  
对MVVM的理解和实现  
是否解读过vue的源码  
vue中如何实现响应式  
vue中如何解析模板  
vue的整个实现流程

**2.从jQuery到框架**

jQuery和Vue实现todo-list理解两者不同

jQuery和Vue不同：  
1.数据和视图的分离，解耦（开放封闭原则）  
2.以数据驱动视图，只关心数据变化，DOM操作被封装

**3.如何理解MVVM**

MVC模式（两种）：  
M-Model数据  
V-View视图、界面  
C-Controller控制器、逻辑处理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
MVVM：  
Model-模型、数据  
View-视图、模板（视图和模板是分离的）  
ViewModel-连接Model和View

ViewModel中间的桥梁做作用，View通过DOM事件绑定控制数据对象Model，数据对象Model通过数据绑定改变View视图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

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

**4.Vue三要素**

Vue实现三要素：

1.响应式（数据劫持+订阅发布）  
vue如何监听到data的每个属性变化？

2.模板引擎（模板解析成虚拟DOM节点）  
vue的模板如何被解析，指令如何处理？

3.渲染（DOM操作）  
Vue的模板如何被渲染成HTML？以及渲染过程？以及data变化之后，重新渲染过程

下面我们分别讲解这三要素

**5.Vue：响应式**

Vue中如何实现响应式：  
什么是响应式？  
Object.defineProperty  
模拟

1.什么是响应式？

修改data属性之后，vue立刻监听到  
data属性被代理到vm上（例如控制台vm.name = ‘lisi’）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]  
2.defineProperty

问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]

上面说的监听到是比如我页面中使用obj对象数据，我进行获取和赋值属性的时候，页面怎么能直接监听到？

Object.defineProperty（原理是重写get，set方法）:

var obj = {}
    var name = 'zhangsan'
    Object.defineProperty(obj,"name",{
    	get:function(){
    		console.log('get')
    		return name
    	},
    	set:function(newVal){
    		console.log('set')
    		name = newVal
    	}
    });
    
    console.log(obk.name)	//可以监听到
    obj.name = 'lisi'		//可以监听到

相对于字面量声明对象，Objec.defineProperty将函数的设置和获取都变成了函数。

3.模拟响应式

模拟两点：  
1.Objec.defineProperty的定义和监听  
2.data里的属性怎么代理到vm

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

var vm = {}
    var data = {
    	price:100,
    	name:'zhangsan'
    }
    
    var key
    for(key in data){
    	//命中闭包。新建一个函数，保证key的独立的作用域
    	(function(key){
    		Object.defineProperty(vm,key,{ //把key（peice、name）定义到vm上
    			get:function(){
    				console.log('get',data[key]	//类似页面的使用，输出结果可以证明可以监听到
    				return data[key]
    			},
    			set:function(newVal){
    				console.log('set',newVal)；		//类似页面的使用，输出结果可以证明监听到
    				data[key] = newVal
    			}
    		})
    	})(key)
    }

**响应式总结：**

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

**6.模板解析**

vue中如何解析模板：  
模板是什么？  
render函数  
render函数与vdom

模板是什么？

1.本质：字符串  
2.有逻辑，如v-if v-for等  
3.与HTML格式很像，但有很大区别  
4.最终还要转换为HTML来显示  
5.模板最终必须转换成JS，因为：1.有逻辑，必须用JS才能实现 2.模板转换为HTML进行渲染页面，必须用JS才能实现，基于这两个原因，模板最重要的是转换成一个JS函数（render函数）

所以整体流程是：模板字符串—变成JS渲染函数—渲染成HTML

（所以接下来重点是模板如何变成JS代码）

**7.render函数**

with的用法

with实际应用尽量不要使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]  
render函数解析

模板生成右侧的JS代码/函数：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 10]  
模板中所有信息都包含在了render函数中  
this即vm（所以在return作用下，都挂载了this/vm下面）  
price即this.price即vm.price，即data中的price  
\_c即this.\_c即vm.\_c

手写render函数

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="./vue-2.5.13.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{
       {price}}</p>
        </div>
    
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    price: 100
                }
            })
    
            // 以下是手写的 ppt 中的 render 函数
            function render() {
                with(this) {  // this 就是 vm
                    return _c(
                        'div',
                        {
                            attrs: {'id': 'app'}
                        },
                        [
                            _c('p', [_v(_s(price))])
                        ]
                    )
                }
            }
    		
    		//不用with情况
            function render1() {
                return vm._c(
                    'div',
                    {
                        attrs: {'id': 'app'}
                    },
                    [
                        vm._c('p', [vm._v(vm._s(vm.price))])
                    ]
                )
            }
    
        </script>
    </body>
    </html>

\_c是创建标签，\_v是创建文本节点，\_s转字符串（toString）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 11]  
render函数进一步学习

从哪里可以看到render函数？  
复杂一点的例子，render函数是什么样子的？  
v-if v-for v-on都是怎么处理的？

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>to-do-list by vue</title>
        <script src="./vue-2.5.13.js"></script>
    </head>
    <body>
        <div id="app">
            <div>
                <input v-model="title">
                <button v-on:click="add">submit</button>
            </div>
            <div>
                <ul>
                    <li v-for="item in list">{
       {item}}</li>
                </ul>
            </div>
        </div>
    
        <script type="text/javascript">
            // data 独立
            var data = {
                title: '',
                list: []
            }
            // 初始化 Vue 实例
            var vm = new Vue({
                el: '#app',
                data: data,
                methods: {
                    add: function () {
                        this.list.push(this.title)
                        this.title = ''
                    }
                }
            })
    
            //上面模板生成的render函数
            with(this){  // this 就是 vm
                return _c(
                    'div',
                    {
                        attrs:{"id":"app"}
                    },
                    [
                        _c(
                            'div',
                            [
                                _c(
                                    'input',
                                    {
                                        directives:[
                                            {
                                                name:"model",
                                                rawName:"v-model",
                                                value:(title),
                                                expression:"title"
                                            }
                                        ],
                                        domProps:{	//input方法中，domProps调用的是defineProperty中的get方法，这是双向绑定中的get（model->view）
                                            "value":(title)
                                        },
                                        //on方法的input属性中，是将vm.title赋值为$event.target.value，这样在View输入时候，vm下的title数据可以修改，这是双向绑定中的set（view->model层）。也就是完成了View层向Model层赋值的过程
                                        //这里调用的就是defineProperty中的set方法
                                        on:{
                                            "input":function($event){
                                                if($event.target.composing)return;
                                                title=$event.target.value
                                            }
                                        }
                                    }
                                ),
                                _v(" "), //如果标签有换行，也要创建个空节点 
                                _c(
                                    'button',
                                    {
                                        on:{
                                            "click":add	//button绑定了一个click指向add，也就是之前写在methods中的add方法
                                        }
                                    }, //button有一个子元素_v，就是文本节点submit字符串
                                    [_v("submit")]
                                )
                            ]
                        ),
                        _v(" "),
                        _c('div',
                            [
                                _c(
                                    'ul', //v-for方法，解析成了_l方法，方法传入一个list，返回一个由_c方法组成的元素列表
                                    _l((list),function(item){return _c('li',[_v(_s(item))])})
                                )
                            ]
                        )
                    ]
                )
            }
        </script>
    </body>
    </html>

总结：  
1.首先是winth方法，里面的属性方法都绑定到了vm下。  
2.最外层div，\_c方法第一个参数是标签，第二个参数是属性，第三个参数是子元素列表。如果没有属性，第二个参数直接不要。  
3.input方法中，v-model指令：在对应都\_c()中，属性是directives，其中on方法进行了绑定，on方法的input属性中，是将vm.title赋值为$event.target.value。也就是完成了View层向Model层赋值的过程。这里调用的就是defineProperty中的set方法  
4.如果标签有换行，也要创建个空节点 \_v("")  
5.input方法中，domProps调用的是defineProperty中的get方法。  
6.button绑定了一个click指向add，也就是之前写在methods中的add方法  
7.button有一个子元素\_v,就是文本节点submit字符串  
8.v-for 方法，解析成了\_l方法，方法传入一个list，返回一个由 \_c方法组成的元素列表。

模板如何生成render函数（Vue2.0之后支持预编译，简化了过程）

Vue2.0开始支持预编译  
开发环境：写模板  
通过编译打包，实际应用时候，模板生成了JS代码  
生产环境：JS

所以，Vue中模板生成render函数Vue已经帮我们做好了，我们要重点理解和关注的是template和render函数内容的一一对应关系，而不是template生成render函数的复杂过程。

**8.我们了解了v-for v-if如何变成render函数执行，接触了模板中“逻辑”的问题，我们接下来了解模板变成render函数后如何生成HTML渲染页面的问题（即render函数与HTML页面的关系）。**

1.vm.\_c是什么？  
2.render函数返回了什么？

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

vm.\_c其实就是相当于snabbdom中的h函数  
render函数执行之后，返回的是vnode

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

vm._update(vnode){	//render函数作为参数，传递给vnode
    	const preVnode = vm._vnode	//获取之前的vnode
    	vm._vnode = vnode
    	if(!prevVnode){
    		vm.$el = vm.__patch__(vm.$el,vnode)	//如果之前没有vnode，就使用第一个patch函数，把vnode赋给页面容器
    	} else {
    		vm.$el = vm.__patch__(prevVnode,vnode)	//如果之前有vnode，就使用第二个patch函数，vnode和prevVnode进行diff，然后更新
    	}
    }
    
    function updateComponent(){
    	//vm._render即上面的render函数，返回vnode
    	vm._update(vm._render())	//vm._render就是我们上面分析的，模板转换成的render函数
    }

**这就是我们分析的render函数和vdom之前的关系，也是render函数更新到HTML页面的过程**

整体过程，template模板转成render函数，render函数利用vdom渲染HTML页面

**render函数和vdom**

updateComponent中实现了vdom的patch  
页面首次渲染执行updateComponent  
data中每次修改属性，执行updateComponent

**9.问题解答**

模板：字符串，有逻辑，嵌入JS变量…  
模板必须转化为JS代码（有逻辑、渲染HTML、JS变量）  
render函数是什么样子  
render函数执行是返回vnode（执行过程中根据模板递归的组合vnode，最终返回一个vdom）  
updateComponent（updateComponent会有两个方式，一种是第一次更新时的添加，和之后新旧虚拟节点的比较）。

**10.整体流程**

defineProperty用来监听data属性变化，data的属性变化是触发re-render的导火索，re-render会生成newVnode，然后和当前的vnode进行diff，最后渲染。

vue的整个实现流程

第一步：解析模板生成render函数  
第二步：响应式开始监听  
第三步：首次渲染，显示页面，且绑定依赖  
第四步：data属性变化，触发rerender

第一步：解析模板生成render函数  
with的用法  
模板中所有信息都被render函数包含  
模板中用到的data中的属性，都变成了JS变量  
模板中v-model，v-for，v-on都变成了JS逻辑  
render函数返回vnode

第二步：响应式开始监听  
Object.defineProperty  
将data的属性代理到vm上

第三步：首次渲染，显示页面，且绑定依赖（就是updateComponent（）函数中第一个patch函数就是首次渲染填充HTML页面）

1.初次渲染，执行updateComponent，执行vm.\_render()  
2.执行render函数，会访问到vm.list和vm.title  
3.会被响应式的get方法监听到（2，3步是因为生成的render函数中有get/set方法）  
4.执行updateComponent，会走到vdom的patch方法  
5.patch将vnode渲染成DOM，初次渲染完成

第三步中一些问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 14]

第四步：data属性变化，触发rerender

修改属性，被响应式的set监听到  
set中执行updateComponent  
updateComponent重新执行vm.\_render()  
生成的vnode和prevVnode，通过patch进行对比  
渲染到HTML中

感谢老师讲解

**10.模板解析和页面渲染与Vue生命周期的关系**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 15]  
beforeCreate（创建前）  
created（创建后）  
beforeMount（载入前）  
mounted（载入后）  
beforeUpdate（更新前）  
updated（更新后）  
beforeDestory（销毁前）  
destroyed（销毁后）

**beforeCreate**

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

此时data、dom也不可见！

**created**

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

此时data可见，可以在这个生命周期发送ajax，等回调成功后,将数据放进data中！dom还是不可见.

**beforeMount**

在挂载开始之前被调用：相关的 render 函数首次被调用。

此时data可见 $el DOM依然不可见，没什么用，created 完全可以代替。

**mounted**

el 被新创建的 `vm.$el`替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 `vm.$el`也在文档内。

此时data 和 dom都可见，生命周期执行完毕，工作中会在这个生命周期里面调用methods里面发送ajax的函数，意思是等dom加载完毕之后操作一些方法或发送ajax，跟写在created 没什么区别。

**beforeUpdated和ubdated**

beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或watcher取而代之。

**beforeDestory和destroyed**

beforeDestory：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

参考文章：https://www.w3xue.com/exp/article/20195/33517.html

Vue的整个实现流程对应生命周期

第一步：解析模版成render函数-》beforeCreated

第二步：响应式开始监听-》created

第三步：首次渲染，显示页面，且绑定依赖：-》beforeMounted/mounted

第四步：data属性变化，触发rerender-》beforeUpdate，update

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20211023/efe52650ea7841d9b8be56068722043c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20211023/50ba6867c08e4755b42e829e837f7328.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20211023/3cb8d32205aa479ca52515f21560a954.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20211023/9d4006ff40824df69bd9f68b21a41399.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20211023/05cc5ad81d544a12bcb6e33f62875932.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20211023/851e8c23594e44f3b533441cb55e3846.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20211023/7948cc09aef64c45a7cc1e1c779ffb9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20211023/4fe5d1c27a1b403285523fd37409497b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20190816231341871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2019081623394012.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2019081623213217.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20190816234554278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20190817151045154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20190817151403183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2019081716470710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20190817194342992.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ=,size_16,color_FFFFFF,t_70