前端面经总结（五）

接前端面经总结（四）

Vue

Vue是一个渐进性框架，可以把一个页面分割成多个组件，当其他页面有类似功能时，直接让封装的组件复用。Vue是构建页面的声明式框架，不关心具体实现，只关心图层

v-model原理

绑定数据并监听数据改变。初始化时使用Object.defineProperty/Proxy（2.0/3.0）重新定义data中属性，当页面使用对应属性时，手机当前组件的watcher，若属性变化则通知相关依赖进行更新操作。

Object.defineProperty缺点

1. 无法检测到对象属性的动态添加和删除

2. 无法检测到数组下标和length属性的变更

生命周期

• beforeCreate：在beforeCreated方法中无法访问data、computed、methods、watch等属性，只能访问props、attrs、setupState等内容。

• created阶段，组件初始化，当组件完成初始化并设置完成后到达此阶段

• beforeMount阶段：当组件为第一次渲染时，首先调用生命周期beforeMount方法。生命周期beforeMount在created之后，但两者差别不大，平时可以在这两个生命周期做一些渲染前的准备工作。如网络请求，页面初始数据的操作等

• Mount阶段：vue实例挂载到真实DOM上，表示组件渲染工作完成

• beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

• Updated阶段：虚拟DOM重新渲染和打补丁后调用，组件新的DOM更新

• beforeDestroy阶段：实例销毁前调用，常用于销毁定时器，解绑事件

• Destroy阶段：实例销毁后调用。

Vue和React区别

• React整体时函数式思想，把组件设计成纯组件，状态和逻辑通过参数传入，故在react中时单项数据流

• Vue是响应式思想，基于数据可变，通过对每个属性建立watcher监听，当属性变化时，响应式的更新

Vuex流程

一种专为vue使用的状态管理模式，采用集中式存储管理应用所有组件的状态，并通过相应的规则保证状态以一种可预测的方式发生变化

主要包括3个部分

• state：驱动应用的数据源

• view：以声明的方式将state映射到视图

• actions：响应在view上用户输入导致的变化

流程：

1. 页面通过mapAction异步提交事件到action。

2. action通过commit把对应参数同步提交到mutation

3. mutation修改state中对应的值

4. 通过getter把对应的值传出去

5. 在页面计算属性中通过mapGetter动态获取state中的值

状态和属性

• state：保存共有数据，数据是响应的

• getter：对state进行计算操作，主要用来过滤一些数据

• mutations：定义方法动态修改state中的数据，通过commit提交方法，方法必须是同步的

• actions：将mutations里的处理数据的方法变成异步的，即异步操作数据

• modules：模块化vuex

若没有vuex发生的情况

1. 遇到多个组件共享状态时，传参的方法对于多层嵌套的组件会很繁琐，且对兄弟组件件的状态传递无能为力。

2. 当不同视图的行为需要变更同一个状态时，通过采用父子组件直接引用或通过事件来变更和同步状态的多份拷贝会导致很多无法维护的代码

vue-router路由的两种方式

vue-router是但也应用的路径管理器，用于设定访问路径，并将路由和组件映射起来。

1. hash：使用URL的hash来模拟一个完整的URL。改变hash不会重新加载页面。通过hash锚点值的改变渲染指定dom位置的不同数据

2. history：在配置路由规则时，加入mode：“history”即可。此模式充分利用history.pushState API完成URL跳转且无需重新加载页面。此方式需要在服务端增加一个覆盖所有情况的候选资源，若URL匹配不到任何静态资源，则返回同一个index.html页面。

$route和$router区别

1. $route是路由信息对象，包括path/params/hash/query/fullPath/matched/name等路由信息参数

2. $router是路由实例对象，包括了路由的跳转方法，钩子函数等

vue-router守卫

1. 全局前置守卫：通过在main.js入口文件定义router.beforeEach

2. 路由独享守卫：在路由配置上直接定义beforeEnter

3. 组件内守卫：在路由组件内直接定义beforeRouterEnter/beforeRouteUpdate等

   • to：即将进入的目标（路由对象）

   • from：当前导航正要离开的路由

   • next：function。调用该方法来resolve钩子，即通过此函数跳转路由，若不用则拦截，执行效果依赖next方法的调用参数

axios

axios是请求后台资源的模块，通过npm install命令安装

实现登陆功能

1. 跨域，现在config/index.js文件中设置跨域

2. js使用import将axios导入，通过.get/.post发送请求，若成功，调用.then函数中内容，若失败，调用.catch函数中内内容

vue项目性能优化

1. 模版内不要写太多表达式

2. 虚幻调用子组件时添加key

3. 频繁切换使用v-show，不频繁切换使用v-if

4. 按需加载，用require或import按需加载需要的组件

5. 路由懒加载（用到时再加载）

v-if和v-show区别

1. v-if控制dom节点的存在与否来控制元素的显示；v-show通过设置dom元素的display样式隐藏来控制元素显示

2. v-if切换有局部编译/卸载的过程，初始条件为假时什么也不做，只有条件第一次为真时才开始局部编译

3. v-if有更高的切换消耗，v-show有更高的初始渲染消耗

常见的兼容问题

浏览器默认的margin和padding不同。 解决方案是加一个全局的*{margin:0;padding:0;}来统一。

vue2和vue3区别

1. vue3支持多个根节点，vue2只能有一个根节点

2. 增加组合式api，将相同功能的变量进行集中管理

3. 自定义渲染其，可用于app/小城需和游戏开发

4. 使用ts重写了源码

5. 数据响应重新实现，使用proxy替代了Object.defineProperty

组件通信

1. 父子组件

   • 通过v-bind属性绑定的方式，将data属性的值传给子组件

   • 子组件通过props属性接收父组件传递的数据，该属性的值为数组

2. 兄弟组件

   • 使用eventBus，穿件VUe实例，使各兄弟公用一个事件机制，传递数据放通过事件触发bus.$emit方法，接收数据方通过mounted触发bus.$on接收数据。

   • 借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B

React

生命周期

• Mounting：已插入真实DOM

• Updating：正在被重新渲染

• Unmounting：已移除真实DOM

子组件向父组件传值

父组件通过props向子组件传值，子组件调用父组件给他的函数给父组件传值

setState

setState通过一个队列机制实现state更新，当执行setState时，会将需要更新的state很后放入状态队列
而不会立即更新this.state，队列机制可以高效地批量更新state。如果不通过setState而直接修改this.state的值
那么该state将不会被放入状态队列中。当下次调用setState并对状态队列进行合并时，就会忽略之前修改的state，造成不可预知的错误

性能优化

webpack打包体积大

1. 异步加载模块

2. 提取第三方库

3. 代码压缩

4. 去除不必要的插件

优化webpack构建性能

1. 减少代码体积

2. 减少目录检索范围

3. 减少检索路径

移动端性能优化

1. 按需加载，懒加载

2. 资源预加载

3. 图片压缩处理，使用base64内嵌图片

4. 合理缓存dom对象

5. 使用touchstart代替click，减少300ms的延迟

6. 不滥用web字体

7. 尽量使用事件代理，避免直接事件绑定

8. 使用viewport固定屏幕渲染，加速页面渲染内容

vue的spa优化

1. 减少入口文件体积

2. 静态资源本地缓存

3. 开启gzip压缩

CDN

尽可能避开互联网有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快更稳定

基本原理是广泛使用各种缓存服务器，将这些缓存服务器分不到用户访问相对的地区或网络中，当用户访问网络时、利用全局负载技术将用户访问指向距离最近的缓存服务器，由该服务器直接响应用户的饿请求