最近面试被问到的问题

2021年11月24日 阅读数:6
这篇文章主要向大家介绍最近面试被问到的问题,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

 

1.组件的之间的传参调方法
v三、
props(经常使用)
$emit(经常使用)
expose / ref(经常使用)
provide / inject(经常使用)
Vuex(经常使用)
$attrs
v-model
mittvue

v二、
props(经常使用)
$emit / v-on(经常使用)
slot(经常使用)
ref(经常使用)
Vuex(经常使用)
provide / inject
parent
listeners
v-model
EventBus
$root
.syncnode

父组件传值给子组件,子组件使用props进行接收
子组件传值给父组件,子组件使用$emit+事件对父组件进行传值
组件中能够使用$parent和$children获取到父组件实例和子组件实例,进而获取数据
使用$attrs和$listeners,在对一些组件进行二次封装时能够方便传值,例如A->B->C
使用$refs获取组件实例,进而获取数据
使用Vuex进行状态管理
使用eventBus进行跨组件触发事件,进而传递数据
使用provide和inject,官方建议咱们不要用这个,我在看ElementUI源码时发现大量使用
使用浏览器本地缓存,例如localStoragewebpack

父子组件通讯能够用:
props
$emit / v-on
listeners
ref
.sync
v-model
parent
EventBus ($emit / $on) 适用于 父子、隔代、兄弟组件通讯nginx

兄弟组件通讯能够用:
EventBus
Vuex
$parentes6

跨层级组件通讯能够用:
provide/inject
EventBus
Vuex
listeners
$rootweb

2.vue生命周期
从开始建立、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程

V三、
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onActivated
onDeactivated
onErrorCapturednpm

V二、
beforeCreate: // 在实例初始化以后, 数据观测 和 event/watcher 事件配置以前被调用。
created: // 实例已经建立完成以后被调用。实例已完成如: 数据观测,属性和方法的计算,watch/event事件回调。
beforeMount: // 在挂载开始以前被调用, 该函数在服务器端渲染期间不会被调用。
mounted: // el被新建立的 vm.$el替换,并挂载到实例上去以后调用该函数,在该函数内能够获取元素。
render: // 页面被渲染时会调用该函数。该函数在mounted以前会被调用。
beforeUpdat // 数据更新时调用,发生在虚拟Dom从新渲染以前。该函数在服务器端渲染期间不会被调用。
updated: // 因为数据更改致使虚拟DOM从新被渲染会调用。在被渲染后调用该函数。能够或许新的dom元素。该函数在服务器端渲染期间不会被调用。
activated: // keep-alive组件激活时调用 该函数在服务器端渲染期间不会被调用。
deactivate: // keep-alive 组件停用时被调用。该函数在服务器端渲染期间不会被调用。
beforeDestro: // 实例销毁以前被调用,实例仍然彻底可用 该函数在服务器端渲染期间不会被调用。
destroyed: // Vue 实例销毁后调用,调用后,Vue实例全部东西都会被解绑定,全部的事件监听器会被移除,全部的实例被销毁。json


V2到V3的变化
v3如今没有了beforeCreate和created(建立),其余的都在setup里面用
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured后端

V2的父组件和子组件生命周期钩子函数执行顺序能够归类为如下 4 部分:
加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程父 beforeUpdate -> 父 updated
销毁过程父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed跨域


3.slot
能够绑定数据的插槽,显示内容彻底由子组件决定,数据来自子组件。
若是绑定数据太多,而你不须要全都用到的时候能够使用es6的对象解构,关于对象解构比较简单。
做用域插槽:在slot上面绑定数据
做用域插槽绑定了一套数据,父组件能够拿来用。状况就变成了这样:样式父组件说了算,但内容能够显示子组件插槽绑定的。


4.VueX
State:定义了应用状态的数据结构,能够在这里设置默认的初始状态。
Getter:容许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation:是惟一更改 store 中状态的方法,且必须是同步函数。
Action:用于提交 mutation,而不是直接变动状态,能够包含任意异步操做。
Module:容许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

4.路由
一、路由的模式
hash模式:经过#号后面的内容的更改,触发hashchange事件,实现路由切换
history模式:经过pushState和replaceState切换url,触发popstate事件,实现路由切换,须要后端配合
abstract : 支持全部 JavaScript 运行环境,如 Node.js 服务器端。若是发现没有浏览器的 API,路由会自动强制进入这个模式.
二、路由解析
多个路由解析为同一个Vue组件。问题是,Vue出于性能缘由,默认状况下共享组件将不会从新渲染,若是你尝试在使用相同组件的路由之间进行切换,则不会发生任何变化。
若是依然想从新渲染,怎么办呢?能够使用key <router-view :key="$route.path"></router-view>
noCache: true 不缓存每次都刷新

5.跨域

一、跨域解决方案
经过jsonp跨域
document.domain + iframe跨域
location.hash + iframe
window.name + iframe跨域
postMessage跨域
跨域资源共享(CORS)
nginx代理跨域(经常使用)可在nginx的静态资源服务器中加入配置
nodejs中间件代理跨域 利用node + webpack + webpack-dev-server代理接口跨域
WebSocket协议跨域 WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通讯,同时容许跨域通信,是server push技术的一种很好的实现。


6.Vue项目进行哪些优化
一、代码层面的优化
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key,且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
显示大量数据时使用 Vue 虚拟滚动条 npm install vue-virtual-scroller
服务端渲染 SSR or 预渲染
二、Webpack 层面的优化
Webpack 对图片进行压缩
减小 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
三、基础的 Web 技术的优化
开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈