前端学科面试题（来自硅谷视频）

秒速五厘米 2022-11-03 11:13 153阅读 0赞

### 文章目录 ###

*   *  一、作用域和值类型引用类型的传递
     *   *   *  题1：作用域
             *  题2：值类型和引用类型的传递
     *  二、封装函数将字符串进行驼峰命名
     *  三、冒泡排序
     *  四、反转数组
     *  五、去掉数组中重复性的数据
     *  六、物理像素
     *   *   *  1px物理像素实现方案1
             *  1px物理像素实现方案2
     *  七、元素水平垂直居中
     *   *   *  方案1
             *  方案2
             *  方案3
             *  方案4
     *  八、css实现三角形
     *  九、实现移动端rem适配
     *  十、背景图片的距离
     *  十一、js综合面试题
     *  十二、函数节流和防抖
     *   *   *  1. 什么是函数节流？
             *  2. 什么是函数防抖？
             *  3. 二者区别
     *  十三、跨域
     *  十四、nodejs的事件轮询机制
     *  十五、从一个url地址到最终页面渲染完成，发生了什么？
     *  十六、闭包
     *  十七、变量提升（预处理）和执行上下文
     *   *   *  1. 变量提升（预处理）
             *  2. 执行上下文（执行上下文对象）
     *  十八、宏任务和微任务
     *   *   *  1. 什么是宏任务？
             *  2. 什么是微任务？
             *  3. 例题：
     *  十九、小程序快速入门
     *  二十、比较 React 和 Vue
     *   *   *  1. 相同点
             *  2. 不同点
     *  二十一、Redux管理状态的机制
     *   *   *  1. 对Redux基本理解
             *  2. Redux的工作原理
             *  3. Redux使用扩展
     *  二十二、Vue组件间通信方式
     *   *   *  1. 通信种类
             *  2. 实现通信方式
             *   *  （1）方式1：props
                 *  （2）方式2： vue自定义事件
                 *  （3）方式3：消息订阅与发布
                 *  （4）方式4：vuex
                 *  （5）方式5：slot
     *  二十三、Vuex管理状态的机制
     *   *   *  1. 对Vuex基本理解
             *  2. Vuex的工作原理
     *  二十四、Vue的MVVM实现原理
     *   *   *  1. 理解
             *  2. 原理结构图

## 一、作用域和值类型引用类型的传递 ##

#### 题1：作用域 ####

var num1 = 55;
    var num2 = 66;//100
    
    function f1(num, num1) { 
    	// var num =55;
    	// var num1 = 66;
    	num = 100;//100
    	num1 = 100;//100
    	num2 = 100;//100
    	console.log(num);//100
    	console.log(num1);//100
    	console.log(num2);//100
    }
    // 55 66
    f1(num1, num2);
    console.log(num1);//55
    console.log(num2);//100
    console.log(num);// 报错

![在这里插入图片描述][20210227213131829.png]

#### 题2：值类型和引用类型的传递 ####

function Person(name, age, salary) { 
    	this.name = name;
    	this.age = age;
    	this.salary = salary;
    }
    
    function f1(person) { 
    	//var person = p;
    	person.name = "ls";
    	person = new Person("aa", 18, 10);
    }
    
    var p = new Person("zs", 18, 1000);
    console.log(p.name);//zs
    f1(p);
    console.log(p.name);//ls

![在这里插入图片描述][20210227213311393.png]

## 二、封装函数将字符串进行驼峰命名 ##

> **例如：已知有字符串foo=‘get-element-by-id’,写一个function将其转化成驼峰表示法”getElementById”**

//自定义函数
    function toString(foo) { 
        //var foo = 'get-element-by-id';
    	//根据某个字符进行切割
    	var arr = foo.split('-');
    	//获取每个元素中的第一个字符并转换成大写
    	// console.log(arr[1].charAt(0).toUpperCase() + arr[1].substr(1, arr[1].length - 1));
    	for(var i = 1; i < arr.length; i++) { 
    
    		arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1)
    	}
    	//根据某个字符将数组转成字符串
    	return arr.join('');
    }
    
    console.log(toString('get-element-by-id'));

![在这里插入图片描述][20210227213544964.png]

## 三、冒泡排序 ##

![在这里插入图片描述][20210227213641148.png]

## 四、反转数组 ##

var arr = [1,2,3,4,5,6,7,8];
    for(var i = 0;i<arr.length/2;i++){ 
    	//arr[0] arr[arr.length-1-0];
    	//arr[1] arr[arr.length-1-1];
    	//arr[2] arr[arr.length-1-2];
    	//arr[3] arr[arr.length-1-3];
    	
    	//借助第三方变量交换两个变量的值
    	var temp = arr[i];
    	arr[i] = arr[arr.length-1-i];
    	arr[arr.length-1-i] = temp;
    }
    console.log(arr);

![在这里插入图片描述][20210227213732389.png]

## 五、去掉数组中重复性的数据 ##

> **1.创建一个新数组，把原数组中的第一个元素插入到新数组中  
> 2.遍历原数组中的每一个元素分别和新数组中的每一个元素进行比较**

//原数组
    var arr = [8,11,20,5,20,8,0,2,4,0,8];
    // 新数组
    var  t = [];//var t = [8,11];
    t[0] = arr[0];
    //arr中的每个元素
    for(var i=0;i<arr.length;i++){ 
    	//t中的每个元素
    	for(var k = 0;k<t.length;k++){ 
    		
    		//当原数组中的值和新数组中的值相同的时候，就没有必要再继续比较了，跳出内循环
    		if(t[k] == arr[i]){ 
    			break;
    		}
    		//拿原数组中的某个元素比较到新数组中的最后一个元素还没有重复
    		if(k == t.length-1){ 
    			//将数据插入新数组
    			t.push(arr[i]);
    		}
    	}
    }
    console.log(t);

![在这里插入图片描述][20210227213928121.png]

## 六、物理像素 ##

#### 1px物理像素实现方案1 ####

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 8rem; height: 8rem; border: 1px solid #000000; } </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    <script type="text/javascript"> var box = document.getElementById('box'); //获取设备像素比 var dpr = window.devicePixelRatio; //比例 var scale = 1/dpr; //获取屏幕宽度 375 var width = document.documentElement.clientWidth; //获取meta标签 var metaNode = document.querySelector('meta[name="viewport"]') metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no') //元素比例乘回来 var htmlNode = document.querySelector('html'); htmlNode.style.fontSize = width/16*dpr + 'px'; </script>
    </html>

其中：  
![在这里插入图片描述][20210227215458222.png]  
![在这里插入图片描述][20210227215620831.png]

#### 1px物理像素实现方案2 ####

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            *{ 
                margin: 0;
                padding: 0;
            }
            #box{ 
                width: 200px;
                height: 200px;
                position: relative;
            }
            #box:after{ 
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                background: #000000;
            }
            @media screen and ( -webkit-min-device-pixel-ratio:2 ) { 
                #box:after{ 
                    transform: scaleY(0.5);
                }
            }
            @media screen and ( -webkit-min-device-pixel-ratio:3 ) { 
                #box:after{ 
                    transform: scaleY(0.333333333333);
                }
            }
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

## 七、元素水平垂直居中 ##

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

#### 方案1 ####

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

#### 方案2 ####

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

#### 方案3 ####

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

#### 方案4 ####

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

## 八、css实现三角形 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 0px; height: 0px; border: 100px solid transparent; border-top-color: deeppink; border-left-color: deeppink; } </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 0px; height: 0px; border: 100px solid transparent; border-top-color: deeppink; } </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

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

## 九、实现移动端rem适配 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 8rem; height: 8rem; background: deeppink; } </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    <script type="text/javascript"> //获取屏幕宽度 var width = document.documentElement.clientWidth; //获取html var htmlNode = document.querySelector('html'); //设置html字体大小 htmlNode.style.fontSize = width/16 + 'px'; </script>
    </html>

## 十、背景图片的距离 ##

> **求背景图片左边到\#box盒子左边框外侧的距离**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style type="text/css"> * { margin: 0; padding: 0; } #box{ width: 100px; height: 200px; background: pink; padding: 100px; border: 80px solid blue; background-image: url("img/1.png"); background-repeat: no-repeat; background-origin: content-box; background-position: -50px 0; } /*答案：130px*/ </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

![在这里插入图片描述][20210227223407354.png]

## 十一、js综合面试题 ##

**题目：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 7]

> **分析1：**  
> **变量与函数会整体提升，变量提升只是声明提升，为undefined；函数提升是整体提升； 如果变量与函数名称冲突，保留函数忽略变量。**  
> **如下图所示，代码变为：**  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 8]

> **分析2：**  
> **最后一句代码对 getName 进行了重新赋值，  
> 如下图所示，代码变为：**  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 9]

> **输出结果：**

> **1. Foo.getName() 输出 2**

> **2. getName() 输出 4**

> **3. Foo().getName() 输出 1**
> 
>  *  **先执行Foo() 函数，会将全局的 getName() 函数重新赋值成下图所示：**  
>     ![在这里插入图片描述][20210228165941197.png]\* **Foo() 函数会返回this，this的指向为 window，所以 Foo().getName() 会变成 window.getName() ，此时全局的 getName() 已变成 alert(1)，所以此时的输出结果是 1。**

> **4. getName() 输出 1**

> **5. new Foo.getName() 输出2**  
> ![在这里插入图片描述][20210228170631652.png]

> **6. new Foo().getName() 输出3**
> 
>  *  **new Foo() 会生成一个实例对象foo，即 foo.getName()，实例对象找对应的属性是沿着隐式原型链，即原型链查找，最后在下图所示位置找到，故输出3。**  
>     ![\](https://img-blog.csdnimg.cn/20210228171358917.png)][https_img-blog.csdnimg.cn_20210228171358917.png]

> **7. new new Foo().getName() 输出3**  
> ![在这里插入图片描述][2021022817165751.png]

## 十二、函数节流和防抖 ##

#### 1. 什么是函数节流？ ####

> **连续发生的事件在 n 秒内只执行一次函数。**  
> 当持续触发事件时，保证在一定时间内只调用一次事件处理函数  
> ![这里是引用][2021022817252466.png]  
> **实现函数节流主要有两种方法：时间戳和定时器**

**方法一：定时器 代码：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 10]

**方法二：时间戳 代码：**  
![在这里插入图片描述][20210228172848971.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 11]

#### 2. 什么是函数防抖？ ####

> **指触发事件后在 n 秒内函数只执行一次，若在 n 秒内再次触发则重新计算。**  
> ![这里是引用][20210228173136223.png]  
>   第一次看到这个概念的时候不太理解，不明白是什么意思。

>   其实可以这样理解，比如我点击一个按钮后不立即执行函数，而是在 2s 后执行，  
> **  如果这 2s内我没有再次点击按钮，那么执行函数；  
>   但是如果这 2s 内我再次点击了按钮，那么需要重新等待 2s 后才能执行函数，以此类推，在新的 2s 内如果我再次点击按钮，同样清零重新计时 2s 后执行。**

>   **所以，在规定时间内频繁触发函数，只会执行一次，且最后一次生效，前面的不生效。**

**代码：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 12]

#### 3. 二者区别 ####

> **用一句话总结防抖和节流的区别：**  
> **防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行**

## 十三、跨域 ##

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

**其中 jsonp 方式 前端需要照以下这样做：**

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

## 十四、nodejs的事件轮询机制 ##

**问题：下图所示，三者的执行顺序是？**

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

**答案：**

**无论怎样换三者的位置和顺序，执行顺序都不变，即答案唯一，即执行顺序和位置顺序无关。**

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

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

## 十五、从一个url地址到最终页面渲染完成，发生了什么？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 20]

## 十六、闭包 ##

> 关于闭包内容，可以看我的博客[https://blog.csdn.net/qq\_43652492/article/details/109901846][https_blog.csdn.net_qq_43652492_article_details_109901846]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 21]  
**例题1：闭包的应用场景**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 22]

**例题2：说说它们的输出情况**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 23]

## 十七、变量提升（预处理）和执行上下文 ##

#### 1. 变量提升（预处理） ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 24][]

#### 2. 执行上下文（执行上下文对象） ####

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

## 十八、宏任务和微任务 ##

#### 1. 什么是宏任务？ ####

*  分类： setTimeout setInterval requrestAnimationFrame
 *  宏任务所处的队列就是宏任务队列
 *  第一个宏任务队列中只有一个任务： 执行主线程的js代码
 *  宏任务队列可以有多个
 *  当第一个宏任务队列的中的任务全部执行完以后会查看是否有微任务队列，如果有先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列

#### 2. 什么是微任务？ ####

*  分类： new Promise().then(回调) process.nextTick
 *  微任务所处的队列就是微任务队列
 *  只有一个微任务队列
 *  在上一个宏任务队列执行完毕后如果有微任务队列就会执行微任务队列中的所有任务

#### 3. 例题： ####

console.log('----------------- start -----------------');
    
    setTimeout(() => { 
      console.log('setTimeout');
    }, 0)
    
    new Promise((resolve, reject) =>{ 
      for (var i = 0; i < 5; i++) { 
        console.log(i);
      }
      resolve();  // 修改promise实例对象的状态为成功的状态
    }).then(() => { 
      console.log('promise实例成功回调执行');
    })
    
    console.log('----------------- end -----------------');

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

## 十九、小程序快速入门 ##

见我的博客专栏： [微信小程序 ][Link 1]

## 二十、比较 React 和 Vue ##

#### 1. 相同点 ####

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

#### 2. 不同点 ####

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

## 二十一、Redux管理状态的机制 ##

#### 1. 对Redux基本理解 ####

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

#### 2. Redux的工作原理 ####

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

#### 3. Redux使用扩展 ####

![在这里插入图片描述][20210228214745307.png]

## 二十二、Vue组件间通信方式 ##

#### 1. 通信种类 ####

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

#### 2. 实现通信方式 ####

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

##### （1）方式1：props #####

![在这里插入图片描述][20210228215106965.png]

##### （2）方式2： vue自定义事件 #####

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

##### （3）方式3：消息订阅与发布 #####

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

##### （4）方式4：vuex #####

![在这里插入图片描述][2021022821552059.png]

##### （5）方式5：slot #####

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

## 二十三、Vuex管理状态的机制 ##

#### 1. 对Vuex基本理解 ####

![在这里插入图片描述][20210228220229217.png]

#### 2. Vuex的工作原理 ####

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

## 二十四、Vue的MVVM实现原理 ##

#### 1. 理解 ####

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

#### 2. 原理结构图 ####

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

> 以上内容来自 尚硅谷视频。

[20210227213131829.png]: /images/20221024/eb5fab0011b34c059f76222250f69c30.png
[20210227213311393.png]: /images/20221024/68fe160769604d138b813e9df20ec5a1.png
[20210227213544964.png]: /images/20221024/39cf837e105142c78c72e59a3ddb5d91.png
[20210227213641148.png]: /images/20221024/e1b66b92984a4204869b8d0997c723f7.png
[20210227213732389.png]: /images/20221024/4977ebd91afe41789cc81738da4045cb.png
[20210227213928121.png]: /images/20221024/55c7ff016bb1423e83f090e4b8c84c1b.png
[20210227215458222.png]: /images/20221024/d6fcbd6ec6d54ccc8a4aa017f05865a2.png
[20210227215620831.png]: /images/20221024/b4a6d979e3f341dab9c81ca7b80538da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221024/99ad32d342f64544a8c41820d3d99268.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221024/a177b58aeae641d4835295479c7279ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: /images/20221024/afa55f4c10c64e0a97c421fa4460bb7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: /images/20221024/dfb6a2094f7c4efca91f950fc75fce70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]: /images/20221024/72191c034a7a4edbb24cd7216206f658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 5]: /images/20221024/4afd9b864983426ca2cdaf3f2f7b386f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 6]: /images/20221024/ec20c63d984449c693f3d9ba99403429.png
[20210227223407354.png]: /images/20221024/dc156c363aa64ad4a557e8b1c60d7d13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 7]: /images/20221024/a0b425b8091e4b0a8f9a657868b41324.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 8]: /images/20221024/990340cfb99c43e58e09bb9f831dd7e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 9]: /images/20221024/777ef35142024592836b139df3b5e842.png
[20210228165941197.png]: /images/20221024/676422d1d433433fbc5347bf0466f1da.png
[20210228170631652.png]: /images/20221024/58716be942624450ae722f2dd5b75385.png
[https_img-blog.csdnimg.cn_20210228171358917.png]: /images/20221024/30364c606f5a4cf58b30443f2dfcaf8a.png
[2021022817165751.png]: /images/20221024/1733189d8f964e2c9bb8a4f9b4094ea5.png
[2021022817252466.png]: /images/20221024/260c4076b038494b93b5b99ed1aee3ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 10]: /images/20221024/04237435537446ed87a02f8a2725cdbb.png
[20210228172848971.png]: /images/20221024/4e2e97812ad94feda9b790d1e0a93489.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 11]: /images/20221024/668298c9bc674a7e8788113b6fc3974a.png
[20210228173136223.png]: /images/20221024/432211d0e5be42a48b4a29df04cab03b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 12]: /images/20221024/e040b154d9aa44c283c0c5d370b3a85b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 13]: /images/20221024/3fed00523ca44cc08d9d56d7d5292e21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 14]: /images/20221024/101052d55c5f4e4e91b3582c6b656ec7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 15]: /images/20221024/f4b7aae2f3c6405c867163f087383d15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 16]: /images/20221024/24d805b7e06f43b7adad9d1a26f02bd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 17]: /images/20221024/42983551f020479c97c86ffd54f9b0b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 18]: /images/20221024/590f52fac9ca4210836943d3e11ed8ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 19]: /images/20221024/b73ccbcf2fe94be2b2093caf48e235f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 20]: /images/20221024/4a04a23286e64c5888322f66fc29e2ca.png
[https_blog.csdn.net_qq_43652492_article_details_109901846]: https://blog.csdn.net/qq_43652492/article/details/109901846
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 21]: /images/20221024/71d623c2c7d343b7ab2db6ea279383ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 22]: /images/20221024/94a35eddb5ee4b1a8949fba8b805c19c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 23]: /images/20221024/ab8b0f8c450b48119eca2ca804a4c931.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 24]: /images/20221024/bd999382c72f4504af93d961fad3814e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 25]: /images/20221024/e02615c9db014ae7b65863c350ac7ec2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 26]: /images/20221024/bd07124e0e484f8494544f08051718ce.png
[Link 1]: https://blog.csdn.net/qq_43652492/category_10691380.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 27]: /images/20221024/cddc1e8204694ce7a319526720805be3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 28]: /images/20221024/2b728b15d9d947529f2bcdbf8aa3ee99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 29]: /images/20221024/7e1ae6cc364a48af87094d3a2d323933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 30]: /images/20221024/34dd5f57e6d547fb8addace6bdde45cd.png
[20210228214745307.png]: /images/20221024/697c9f53accf4e6cb6bfaf3f31689d1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 31]: /images/20221024/4a548b81e3354bb7949f01d7d07d5fe0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 32]: /images/20221024/217be963b8fc445bae8cd426a93c83e3.png
[20210228215106965.png]: /images/20221024/3d346486faf2427b9549e714df9ea86e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 33]: /images/20221024/2f0599ba7eb84a3eaf8dcfbc1a015b61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 34]: /images/20221024/5f8dce18b02845d4bfc60eeb3f158f6b.png
[2021022821552059.png]: /images/20221024/47930fe5028b497b84f4c55353ed2593.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 35]: /images/20221024/7b002149f8a04d29a684cf9046a2420b.png
[20210228220229217.png]: /images/20221024/96f0e8ab0eb04ac28bf08e354b2a140f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 36]: /images/20221024/e76bc97084fb473fa12485e95dc3df0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 37]: /images/20221024/12497fa0dcda4cb9bfb8fe0546a0d6cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 38]: /images/20221024/ea48892296af4759a802bb4004689d99.png