开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端面试题-VUE-持续更新 -> 正文阅读

[JavaScript知识库]前端面试题-VUE-持续更新

Webpack面试题

webpack打包原理、基本功能、构建过程

打包原理

将所有的依赖打包成一个bundle.js，通过代码分割成单元片段按需加载

基本功能

代码转换：将ts转js，scss转css，
文件优化：压缩js、css、html，代码，合并图片
代码分割：提取多个页面的公共代码，提取首屏不需要执行的部分代码，让其异步加载
模块合并：采用模块化的项目中，有很多模块很文件，需要构建功能吧模块分类合并成为一个文件
自动刷新：坚挺本地源代码的变化，自动构建、刷新浏览器
代码校验：代码提交到仓库前，检测代码是否符合规范，以及单元检测是否通过
自动发布：更新完成代码后，自动构建出线上发布代码传输给发布系统

构建过程

从entry里面配置的module开始递归解析entry依赖的所有module
没找到一个module，就会根据配置的loader去找对应的规则
对module进行转换，解析出当前module依赖的module
这鞋模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
最后webpack会把所有的Chunk转换成文件输出

??webpack会在恰当的时候执行plugin里的逻辑

常见loader

file-loader: 把文件输出到文件夹中
url-loader: 和file-loader类似，能在文件小的情况下以base64的方式把文件注入到代码中去
source-map-loader：加载额外的source map 文件，方便断掉调试
image- loader：加载并压缩图片文件
css-loader：加载css，支持模块化、压缩、文件导入等
style-loader：把css代码注入到js中，通过DOM操作去加载css
eslint-loader：通过eslint检查js代码
babel-loader：将ES5转为ES6

常见plugin

define-plugin：定义环境变量
commons-chunk-plugin：提取公共代码
uglifyjs-webpack-plugin：通过uglifyES压缩ES6代码
html-webpack-plugin 压缩html
clean-webpack-plugin 打包清理元目录文件，webpack打包器清理dist目录

什么是bundle，chunk，module？

bundle webpack打包出来的文件，
chunk webpack在进行模块的分析时，代码分割出来的代码块
module 开发中单个的模块

VUE面试题

MVC、MVP、MVVM的理解

MVC：model（模型）、view（视图）、controller（控制器）；处理逻辑：view触发事件，controller响应并处理逻辑，调用model，model处理完成后发送给view；

MVP：model、view、present（发布层）理想模型，present为核心，从model获取数据，填充到view；

MVVM：model、view、VM（viewModel）；view与VM保持同步，view绑定到VM的属性上，如果VM的数据变化，通过数据绑定的方式，view会自动更新视图，VM也会暴露在Model中，VM也就是new的Vue实例；

VUE生命周期函数

1）创建阶段

beforCreate：实例创建前，
created：实例创建好，data和methods创建好，可做数据请求；

2）挂载阶段

beforMount：DOM已经存在，
mounted：模版中的HTML渲染在页面中，可做Ajax请求，mounted只会执行一次；

3）更新

beforeUpdate：发生在数据更新之前，
undated：更新后，大多数情况应该避免此期间更改状态，因为这可能导致更新的无限循环。该钩子在服务器端渲染是不会被调用的

4）销毁

beforDestory：在此清楚定时器和绑定的事件；
destoryed：调用后所有事件监听器会被移除，所有的子实例也会被销毁

VUE路由

vue-router

vue的插件，含有router-link router-view 组件，

router-link：<router-link to="路由地址" tag="渲染为什么标签"></router-link>
active-class：router-link组件的属性，直接在路由中配置 linkActiveClass:'active',在router-link标签中写入exact<router-link to="" active-class="" exact></router-link>

vue-router的导航钩子

全局的：

beforEach.boforEach((to, from, next) => {})
afterEach.afterEach((to, from, next)v=>{})

单个路由独享：

beforEnter
beforLeave

组件的：

beforRouterEnter
beforRouterUpdate
beforRouterLeave

$router 和 $route区别

router为vue-router的实例，相当于一个全局路由器对象，包含很多对象和属性。
route相当于正在跳转的路由对象，可以从中获取参数

vue-router 传参

params方式传参

// 传参
this.$router.psuh({
  name: '',
  params: {
    id: id
  }
});
// 获取
this.$route.params.id

query方式传参

// 传参
this.$router.psuh({
  path: '',
  query: {
    id: id
  }
});
// 获取
this.$route.query.id

??query相当于get，参数会拼接在url上，params相当于post

vue-router的两种模式（hash history）

hash模式

原理是window.onhashchange事件,hash值就是#后面的值
history模式

H5中History Interface 中新增的pushState()和replaceState()方法，需要后端配置支持，没有正确配置访问时就会返回404，丢弃了不好看的#，但是如果服务器没有正确的响应或资源，就会出现404，所以history不怕前进后端，就怕刷新

vue-router实现路由懒加载

为了好的用户体验，首屏组件加载更快，解决白屏问题，将页面划分为需要的时候再加载，减少首页加载压力。

常用的懒加载方法：

ES提出的import 方法（最常用）

const 路由组件名 = () => import(需要加载的模块地址)

const Holle = () => import('@...')

VUE异步组件实现

component: resolve => (require(['需要加载的路由地址'])， resolve)

routes: [
	{
		path: '/',
		name: 'Holle',
		component: resolve => (require(["@/component/HelloWord"], resolve))
	}
]

VUE 组件传值

父组件传值给子组件

使用props
- props为数组，直接传递[data， flag]
- props为对象，直接对象类型或者给一个默认值
子组件传值给父组件
- 子组件使用this.$emit('自定义事件名', 参数)
- 父组件<parent-component @自定义事件="方法"></parent-component>，此时方法不能加()。传值为子组件传的值

兄弟组件传值

中央事件总线，eventBus

const bus = new Vue();
bus.$emit(自定义事件名, 传递的数据);
// 接收数据的地方
bus.$on(自定义事件名, function (val) {})

使用VueX

父组件访问子组件中的方法

组件上添加ref属性，给组件设置一个ID，然后通过this.$ref.id名.方法/值

使用依赖注入

父组件通过provide(函数)注入，所有的子组件通过inject(数组)引用，

// 父组件
provide: function () {
  return { 
    getName: this.getName
  }
}
// 子组件
inject: ['getName']

$p a r e n t, t h i s .$ parent 可以直接访问到组件上的data数据和方法
sessionStorage传值

vue中computed和watch、method区别

methods: 定义function的区域
computed: 一定程度和methods差不多，不过计算属性基于属性的，属性的变化跟着变化，不变化就不会调用computed；具有get 、set两个方法
watch: 侦听属性。监听某个值的变化，
- 回调handler(newVal, oldVal)，
- deep: true ; 深度监听
- Immediate: true；立即执行，场景：组件创建的时候立即获取一次列表数据，同时监听框，每当发生变化的时候重新获取一次筛选后的数据列表

VUE双向数据绑定的原理

Vue 采用数据劫持 + 发布订阅模式。通过Object.defineProperty()方法为组件中每个data添加get、set方法

原理：通过Object.defineProperty()劫持各个属性中的getter、setter，在数据变化时，发布消息给订阅者，触发相应的监听回调来渲染视图

需要Observer(观察者)对数据对象进行递归遍历，给每个属性都加上getter、setter
模板解析器complie解析模板指令，将模板中每个变量替换为数据，然后初始化渲染页面视图，并给每个指令对应的几点更新函数，添加数据的监听者，一旦数据变化，收到通知，改变视图
watcher订阅者，在observer和complie之间做中介，