2020前端面试

谁践踏了优雅 2022-12-28 08:22 226阅读 0赞

#### 九、什么是路由，路由的实现原理 ####

**路由**：根据URL地址，跳转到相应页面,vue中通过使用路由进行组件切换  
**路由填充位（也叫做路由占位符）**:`<router-view></router-view>`将来通过路由规则匹配到的组件，将会被渲染到 `router-view` 所在的位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center]  
路由导航守卫都有那些钩子函数？说明在什么场景下会触发这些钩子函数。  
`vue-router` 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。

> 全局守卫  
> `router.beforeEach`：全局前置守卫，进入路由之前  
> `router.afterEach`：全局后置钩子，进入路由之后  
> 路由组件内的守卫  
> `beforeRouteEnter()`：进入路由前  
> `beforeRouteUpdate()`：路由复用同一个组件时  
> `beforeRouteLeave()`：离开当前路由时  
> 独享守卫  
> `beforeEnter:`进入路由之前  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 1]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 2]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 3]

`$route` 和 `$router` 的区别  
`router`为`VueRouter`的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如`history`对象。经常用的跳转链接就可以用`this.$router.push`，和`router-link`跳转一样。。。

`route`相当于当前正在跳转的路由对象。可以从里面获取`name,path,params,query`等。。

**`vue-router`的两种模式**  
1.**hash模式** ：`URL`的`hash` 是以`#`开头，是基于`location.hash`来实现的。`Location.hash`的值就是URL中`#`后面的内容。当`hash`改变时，页面不会因此刷新，浏览器也不会请求服务器。  
同时，`hash` 改变时，并触出发相应的`hashchange`事件，所以，`hash`很适合被用来做前端路由。当`hash`路由发生跳转，便会触发`hashchange`回调，回调里面就可以实现页面的更新操作，从而达到跳转页面的效果。

2.HTML的`history`模式：`history`丢掉了\#，操作中不怕前进和后退，就怕刷新，如果没有服务端的支持,刷新之后就会去请求服务器，由于找不到相应的支持响应或者资源，就会报出404页面。  
`history api`可以分为两大部分：切换和修改

1、切换历史状态包括`back、forward、go`  
这三个方法，对应浏览器的前进，后退，跳转操作；（跳转操作：在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转）

history.go(-2);//后退两次
    history.go(2);//前进两次
    history.back(); //后退
    hsitory.forward(); //前进

2、修改历史状态包括了 `pushState, replaceState`两个方法  
这两个方法接收三个参数:`stateObj, title, url`

window.history.pushState(state, title, url) 
    // state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
    // title：标题，基本没用，一般传 null
    // url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
    //如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
    //执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/
     
    window.history.replaceState(state, title, url)
    // 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录
     
    window.addEventListener("popstate", function() { 
        // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发 
    });

使用history模式出现404解决方法：  
使用`nginx`服务器  
配置`nginx`  
这里的配置意思是将所有的文件都指向`Index.html`文件，然后再给一个404的错误提示页面

server { 
            listen       8089; // 端口
            server_name  localhost; // 访问地址，默认是本机
           location / { 
                try_files $uri $uri/ @router; // 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
                index  index.html index.htm;
            }
            // 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
            #因此需要rewrite到index.html中，然后交给路由在处理请求资源
            location @router { 
                rewrite ^.*$ /index.html last;
            }

**两种模式的区别**  
1. `history`设置的新url可以是与当前url同源的任意值；`hash`只可修改 \# 后面的部分，实质上是同文档的url；  
2. `history`设置的新url可以与当前url相同，依然会把记录添加到栈中；`hash`必须不一样才会添加；  
3. `history`通过stateObject参数可以添加任意类型的数据到记录中；`hash`只可添加短字符串；  
4.`history`可额外设置title属性；

**路由懒加载的三种方法**  
1.vue异步组件

/* vue异步组件技术 */
    { 
      path: '/home',
      name: 'home',
      component: resolve => require(['@/components/home'],resolve)
    },{ 
      path: '/index',
      name: 'Index',
      component: resolve => require(['@/components/index'],resolve)
    }

2.es提案的`import()`

const List = () => import('@/components/list.vue')
    const router = new VueRouter({ 
      routes: [
        {  path: '/list', component: List }
      ]
    })

3.`webpack`的`require,ensure()`

/* 组件懒加载方案三: webpack提供的require.ensure() */
    { 
      path: '/home',
      name: 'home',
      component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
    }, { 
      path: '/index',
      name: 'Index',
      component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
    }

#### 一、CSS性能优化 ####

> 1.尽量使用缩写：p \{ margin: 1px 2px 3px 4px; \}  
> 2.查找并删除未使用的 CSS  
> 3. 文件压缩  
> 4.避免需要性能要求的属性`(border-radius box-shadow transform filter :nth-child position: fixed;)`  
> 5. 优化重排与重绘
> 
> > 避免不必要的重绘:当元素的外观（如`color，background，visibility`等属性）发生改变时，会触发重绘。在网站的使用过程中，重绘是无法避免的。不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。  
> > 不过我们仍需要避免不必要的重绘，如页面滚动时触发的hover事件，可以在滚动的时候禁用hover事件，这样页面在滚动时会更加流畅。

> 6.减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载；
> 
> > 1、首先，使用`@import`引入CSS会影响浏览器的并行下载。使用`@import`引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。  
> > 这就导致浏览器无法并行下载所需的样式文件。  
> > 2、其次，多个`@import`会导致下载顺序紊乱。在IE中，`@import`会引发资源文件的下载顺序被打乱，即排列在`@import`后面的js文件先于`@import`下载，并且打乱甚至破坏`@import`自身的并行下载。

#### 二、javascript定时器，取消定时器，及js定时器优化方法 ####

> 一般不用setInterval，而用setTimeout的延时递归来代替interval。  
> setInterval会产生回调堆积，特别是时间很短的时候。

#### 三、v-model的原理，还有没有其他方法实现？ ####

> `v-model`只是一个语法糖，等于`:value+@input`，真正的实现靠的还是： v-bind:绑定响应式数据，触发 input 事件并传递数据 (核心和重点)  
> `<input v-model="something">`  
> 其实和下面一样的  
> `<input :value="something" @input="something = $event.target.value">`  
> 因此，对于一个带有 v-model 的输入框组件，它应该：接收一个 value prop，触发 input 事件，并传入新值  
> 自定义myInput组件

<template>
      <div style="padding-top: 100px;">
        <button @click="minu"  class="btn">-</button>
            <input type="text" :value="currentValue" @input="handleInput" />
        <button @click="plus" class="btn">+</button>
      </div>
    </template>
    <script>
    export default { 
      props:['value'],
        data () { 
        return { }
      },
      computed:{ 
      	currentValue:function(){ 
      		return this.value
      	}
      },
      methods:{ 
      	handleInput:function(event){ 
          	this.$emit('input', event.target.value); //触发 input 事件，并传入新值
      	},
      	minu:function(){ 
      		this.$emit('input', this.currentValue - 1 );
      	},
      	plus:function(){ 
      		this.$emit('input',  this.currentValue + 1 );
      	},
      }
    }
    </script>
    <style type="text/css">
    	.btn{ 
    		width: 60px;
    	}
    </style>

> 总结：  
> 自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以)，然后给原生控件绑定事件,捕捉到原生组件的值,利用 `$emit`方法,触发`input`方法,组件监听到 `input`事件然后把值传入  
> `v-model` 在内部为不同的输入元素使用不同的属性并抛出不同的事件：  
> `text` 和 `textarea` 元素使用 `value` 属性和 `input` 事件；  
> `checkbox` 和 `radio` 使用 `checked` 属性和 `change` 事件；  
> `select` 字段将 `value` 作为 `prop` 并将 `change` 作为事件。

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

##### 五、在methods里，如何在一个方法A里调用方法B #####

> `this.$options.methods`.方法B

#### 六、Vue中的created和mounted的区别 ####

> `created`:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。  
> `mounted`:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

#### 七、vue兄弟组件之间的方法调用 ####

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

#### 八、splice，slice，substr，substring区别总结 ####

> 1.`splice()`:删除、添加原数组；数组使用，会改变原数组；参数一：要操作的位置下标（即在该下标开始进行添加或删除）；参数二：要删除的数组个数；参数三：在下标为参数一的位置添加的内容；返回值为删除各项所组成的新数组，无删除时则返回空数组。

var str = ["as","dfg","hj"];
    var str_splice = str.splice(1,0,"hh"); 
    console.log(str);    // ["as","hh","dfg","hj"]
    console.log(str_splice);    //[]

> 2.`slice():`数组、字符串位置截取；数组、字符串均可使用；参数一：开始截取的下标；参数二：截取的截止位置但不包含该下标；返回截取的新数组。

var str = ["as","hh","dfg","hj"];
    var str_slice = str.slice(1,3);    //["hh","dfg"]

> 3.`substr()`截取指定长度字符串；字符串使用，用于截取指定长度字符串；参数一：开始截取的下标位置；参数二：要截取的字符串长度；返回截取的新字符串。

var str = "as-dfg-hj";
    var str_substr = str.substr(1,4);    //s-df

> 4.`substring()`字符串位置截取；字符串使用；参数一：开始截取位置；参数二：结束截取下标，但不包含该下标字符；返回截取的新字符串；（第二个参数应该大于第一个参数，如果出现第一个参数大于第二个参数的情况，`substring`方法会自动更换两个参数的位置）

var str = "as-dfg-hj";
    var str_substring = str.substring(1,4);    //s-d

#### 十、vuex ####

*  > State：所有共享的数据都要统一放到 Store 的 State 中进行存储  
    > 组件访问 State 中数据的：this.$store.state.全局数据名称  
    > 组件访问 State 中数据的第二种方式：从 vuex 中按需导入 mapState 函数
 *  > `Mutation` 用于变更 Store中 的数据。  
    > ① 只能通过 `mutation` 变更 `Store` 数据，不可以直接操作 `Store` 中的数据。  
    > ② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。  
    > `this.$store.commit()` 是触发 `mutations` 的方法
 *  > `Action` 用于处理异步任务。  
    > 如果通过异步操作变更数据，必须通过 `Action`，而不能使用 `Mutation`，但是在 `Action`中还是要通过触发 `Mutation` 的方式间接变更数据。  
    > `this.$store.dispatch()` 是触发 `actions`的方法  
    > ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 6]
 *  > `Getter` 用于对 `Store` 中的数据进行加工处理形成新的数据。  
    > ① `Getter` 可以对 `Store`中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。  
    > ② `Store` 中数据发生变化，`Getter` 的数据也会跟着变化。  
    > 使用方法：`this.$store.getters`.名称

#### 十一、为什么 vue 组件中 data 必须是一个函数？ ####

> 对象为引用类型，当复用组件时，由于数据对象都指向同一个 data 对象，当在一个组件中修改 data 时，其他重用的组件中的 data 会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object 的实例），引用地址不同，则不会出现这个问题。

#### 十二、vue 如何监听对象或者数组某个属性的变化 ####

> 受ES5的限制，vue.js不能检测到对象属性的添加或删除，因为vue在初始化实例时将属性转为getter/setter,所以属性必须在data对象上才能让vue.js转换它，才能让它事响应的  
> 一：`this.$set` (你要改变的数组 / 对象，你要改变的位置 /key，你要改成什么 value)  
> `this.$set(this.student, 'age', 15)`  
> 二：给数组、对象赋新值  
> 三：使用`this.$forceupdate`强制刷新

#### 十三、vue 通信方式 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 7]  
子传父  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 8]

兄弟组件传值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 10]

#### 十四、监听对象方法 ####

ES5监听方法：要想监听属性的变化，首先需要通过`Object.defineProperty()`为需要监听的属性设置一个代理。通过改变代理的值，触发set和get的方法，在这两个方法中我们编写我们想要的操作。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70]  
定义多个变量：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 1]

**vue通过component和watch去监听：**  
![在这里插入图片描述][20201222123537238.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 5]

#### 十五、Vue中子组件修改父组件传递过来的props，并不影响父组件的原始数据 ####

> 这仅限于props为非数组及对象等引用类型数据，譬如字符串，数字等  
> 如果props是对象或数组的话，在子组件内修改props的话，父组件是不会报错的。  
> 那么要怎么解决修改props传的值而不污染父组件的值：  
> 1，可以使用ES6提供的Object.assign(\{\}, prop)的返回值就是一个全新的对象，操作这个新对象不会影响旧对象。如果不用ES6就自己递归实现拷贝器  
> 2，可以给对象重新赋值：(给对象里的每一项重新赋值)

#### 十六、vue2.0跟3.0区别 ####

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

#### 十六、vuex传递数据页面刷新 ####

> 页面刷新`store.state`中的数据消失是不可避免的，那么使用`localStorage`来避免这个问题。发现问题的时候我就考虑到存数据在`localStorage`里，但是一个一个数据添加实在是太蠢了。那么就需要一个全局的方法来，将`store`的数据存储在`localStorage`里。具体的方法也是百度的很好用，也很方便。  
> 在App.vue中，`created`初始化生命周期中写入以下方法

//在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{ 
      localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
    })
     
    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));

`replaceState`这个方法呢，查了api，就是替换 `store` 的根状态，然后通过对象赋值`assign`将`localStorage`进行赋值

`beforeunload`这个方法是在页面刷新时触发的，将`store`中的信息存入`localStorage`

这样就通过`localStorage`来避免`vuex`刷新数据消失的问题了。

#### 十七、webpack的基本功能和工作原理？ ####

> **代码转换**：`TypeScript` 编译成 `JavaScript`、`SCSS` 编译成 `CSS` 等等  
> **文件优化**：压缩 `JavaScript、CSS、HTML` 代码，压缩合并图片等  
> **代码分割**：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载  
> **模块合并**：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件  
> **自动刷新**：监听本地源代码的变化，自动构建，刷新浏览器  
> **代码校验**：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过  
> **自动发布**：更新完代码后，自动构建出线上发布代码并传输给发布系统。

**webpack构建过程**

> 从`entry`里配置的`module`开始递归解析entry依赖的所有`module`  
> 每找到一个`module`，就会根据配置的`loader`去找对应的转换规则  
> 对`module`进行转换后，再解析出当前`module`依赖的`module`  
> 这些模块会以`entry`为单位分组，一个`entry`和其所有依赖的`module`被分到一个组`Chunk`  
> 最后`webpack`会把所有`Chunk`转换成文件输出  
> 在整个流程中`webpack`会在恰当的时机执行`plugin`里定义的逻辑

#### 十八、原生JS获取HTML DOM元素的8种方法 ####

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

#### 十九、获取url参数转为对象 ####

**把字符串转为对象**

// 把字符串转化为对象
        var str = 'id=1&name=zhangsan&age=18&className=2003'
        // {id:1,name:zhangsan,age:18,className:2003}
        // 先把字符串转化为 数组
        var arr = str.split('&');
        // arr = ['id=1','name=zhangsan','age=18','className=2003']
    
        var obj = { };
        for (var i = 0; i < arr.length; i++) { 
          // arr[i].split('=') ['id',1]
          var newArr = arr[i].split('=');
          // ['id','1'] ['name':'zhangsan']
          obj[newArr[0]] = newArr[1];
        }
        console.log(obj);

**把对象转为字符串**

// 把对象转化为字符串
        var obj1 = { 
          id: 1,
          name: 'zhangsan',
          age: 18,
          className: 2003
        }
        // 'id=1&name=zhangsan&age=18&className=2003'
        var str1 = '';
        // 遍历对象
        for (var key in obj1) { 
          str1 += key + '=' + obj1[key] + '&';
        }
        // 去掉最后一个 & 
        console.log(str1.substr(0, str1.length - 1));

**封装字符串转为对象函数**

var str = 'id=1&name=fqniu&age=25&workName=frontEnd'
        // strUrlObj 为字符串转为对象的函数名
        function strUrlObj(string) { 
          // 去掉字符串中的 & 的数组
          let strArray = string.split('&')
          //console.log(strArray) //["id=1", "name=fqniu", "age=25", "workName=frontEnd"]
          // 定义一个空对象
          let obj = { }
          for (let i = 0; i < strArray.length; i++) { 
            // 定义一个新的数组来接收 去掉字符串中的 = 的数组
            let newArray = strArray[i].split('=')
            // console.log(newArray)
            // 然后遍历添加每个数组中对应的数据 添加到对象中
            obj[newArray[0]] = newArray[1]
          }
          return obj
        }
        console.log(strUrlObj(str))
        //{id: "1", name: "fqniu", age: "18",workName: "frontEnd"}

#### 二十、for…in与for…of的区别 ####

> `for in` 返回数组的下标（key）;  
> `for of` 返回数组的元素；  
> `for of`不可以遍历普通对象，想要遍历对象的属性，可以用for in循环, 或`Object.keys()`方法。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 8]

#### 二十一、Vue 常见性能优化方式 ####

> 合理使用 `v-show` 和 `v-if`  
> 合理使用 `computed`  
> v-for 时要加 `key`，以及避免和 `v-if` 同时使用  
> 自定义事件、DOM 事件及时销毁  
> 合理使用异步组件  
> 合理使用 `keep-alive`  
> `data` 层级不要太深（因为深度监听一次性监听到底）  
> 使用 `vue-loader` 在开发环境做模板编译（预编译）  
> `webpack` 层面的优化

#### 二十二、 target、currentTarget 的区别？ ####

> `currentTarget` 当前所绑定事件的元素  
> `target` 当前被点击的元素

#### 二十三、 用 js 递归的方式写 1 到 100 求和？ ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/afa2511516844e4eaa98a1606ce2dc5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/6e3a10e652fe419ab594af9218f9d049.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/24c53b3f775c419eb8516bcb85c594a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/c6db3420f2f2428aa0191f2e22b1b699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/4a6419294c4d4795b2480423da399976.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/15eab75dfdd54ac3b6fafe582c5f7572.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/faf53cb436db4f7887729799ccb67b25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/59484ae5a1fd4283b04597fe6d351e61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/bb0b15ecafd449f4be0fcf55fc69cc78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/ffd9a4553f3e4137a00de652b422cffc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/25f06e7b823e4b6bb048cfcc5e4b294c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70]: /images/20221120/732acf5e551c4e989d263cb2c009126a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 1]: /images/20221120/70fc5391c2ab483a9846d3d266759956.png
[20201222123537238.png]: /images/20221120/ab4a6fe277dc43b2a4bcaa038c17800f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 2]: /images/20221120/898da84e2af145b38580497e0eb8c7c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 3]: /images/20221120/84aa6e6d2f1541b192eca4db8f90782d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 4]: /images/20221120/2e84d3b1718144c8a76c7306a36317e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 5]: /images/20221120/946e84e1c202474b89750ddd84c6b216.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 6]: /images/20221120/2a5431eb48bf42b2b072960ca633635e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 7]: /images/20221120/94791f660f914b47a2e49f57c033ec36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 8]: /images/20221120/ce794eb95abc4803a3fd51a42ed7b12f.png