前端笔记整理（Vue）

最新推荐文章于 2024-10-07 19:08:25 发布

LeaT07

最新推荐文章于 2024-10-07 19:08:25 发布

阅读量2.7k

点赞数 14

分类专栏：面试锦囊 Vue 文章标签： vue

本文链接：https://blog.csdn.net/leatitia/article/details/117119542

版权

面试锦囊同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

Vue，一套

MVVM

MVVM即Model-View-ViewModel，将其中的 View 的状态和行为抽象化，让我们可以将UI和业务逻辑分开。MVVM的优点是低耦合、可重用性、独立开发。

mvvm

原理了解

响应原理

Vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty劫持data属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

1、组件data为什么返回函数
组件的data写成一个函数，数据以函数返回值形式定义，复用组件时，就可以返回互不影响的一份data，避免数据污染。

2、vue给对象新增属性页面没有响应
由于Vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data对象上存在才能让Vue将它转换为响应式的。Vue提供了$set方法用来触发视图更新。

3、请说一下响应式数据的理解？

根据数据类型来做不同处理，数组和对象类型当值变化时如何劫持。

对象内部通过defineReactive方法，使用Object.defineProperty() 监听数据属性的 get 来进行数据依赖收集，再通过 set 来完成数据更新的派发；
数组则通过重写数组方法来实现的。扩展它的 7 个变更⽅法，通过监听这些方法可以做到依赖收集和派发更新；( push/pop/shift/unshift/splice/reverse/sort )

v-model双向绑定原理

v-model本质上是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件。

text 和 textarea 元素使用 value 属性和 input 事件
checkbox 和 radio 使用 checked 属性和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件;

这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input。

1、key的作用
高效更新虚拟DOM，触发过渡。

2、computed和watch的区别

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed；

在这里插入图片描述

watch用于观察和监听页面上的vue实例，如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择

生命周期

create、mount、update、destroy前后

nextTick在哪里使用？原理是？

vue多次更新数据，最终会进行批处理更新。内部调用的就是nextTick实现了延迟更新，用户自定义的nextTick中的回调会被延迟到更新完成后调用，从而可以获取更新后的DOM。原理就是异步方法。

vue.use是干什么的？原理是什么？

vue.user()是用来使用插件的，可以在插件中扩展全局指令、组件、原型方法等。

检查插件是否注册，若已注册，则跳出；
处理入参，将第一个参数之后的参数归集，并且在首部塞入 this 上下文；
执行注册方法，调用install方法，处理入参。若没有install方法切插件本身就是function，则直接进行注册；
插件本身是一个函数，直接让函数执行。代码：plugin.apply(null, args)

Vue 路由

Vue路由官方文档

vue路由模式

vue-router共有3中路由模式：hash（hash在URL中，单不被包括在HTTp请求中）、history、abstract；

hash 模式：地址栏URL中的#符号，它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，不需要后台进行配置，因此改变hash不会重新加载页面。
history 模式：利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法（需要特定浏览器支持）。history模式改变了路由地址，需后台配置地址。

路由导航方式

<router-link to="/foo"/>
this.$router.push()

Vue-router有几种钩子函数？

路由钩子类型：全局守卫、路由守卫、组件守卫；
流程：
1.导航被触发；
2.在失活的组件里调用beforeRouteLeave守卫；
3.调用全局beforeEach守卫；
4.在复用组件里调用beforeRouteUpdate守卫；
5.调用路由配置里的beforeEnter守卫；
6.解析异步路由组件；
7.在被激活的组件里调用beforeRouteEnter守卫；
8.调用全局eforeResolve守卫；
9.导航被确认；
10.调用全局的afterEach钩子；
11.DOM更新；
12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

组件通信

props、$emit()
eventBus

axios拦截器配置

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});


// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

webpack

plugin和loader的不同

用法不同
- Loader在 modules.rules 中配置，作为模块的解析规则而存在。类型为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载（loader）和使用的参数（options）；
- Plugin在 plugins 中单独配置。类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入；
作用不同
- Loader直译为加载器。webpack 将一切文件视为模块，但是 webpack 原生是只能解析js文件，如果想要将其它文件也打包，就会用到 loader。所以 loader 的作用是让 webpack 拥有加载接解析非JavaScript文件的能力。

webpack构建流程是？

webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

初始化参数；
开始编译；
确定入口：根据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译；
输出资源；
输出完成。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

如何利用webpack来优化前端性能？

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

压缩代码。UglifyJsPlugin等压缩js文件，cssnano压缩css；
利用 CDN 加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径；
删除死代码；
提取公共代码等；

如何提高webpack的构建速度？

多入口情况下，使用 commonChunkPlugin来提取公共代码；
通过externals配置来提取常用库；
使用happyPack实现多线程加速编译等。

怎么配置单页应用？怎么配置多页应用？

单页面应用，即webpack的标准模式，直接在entry中指定单页应用的入口即可；
多页应用，可使用webpack的 AutoWebPlugin来完成简单自动化的构建。多页应用需注意：
- 每个页面都有公共的代码，可提取抽离，避免重复加载；
- 入口的配置需要灵活，避免每次添加新页面还需修改构建配置；

import和require的区别

require是AMD规范引入方式；import是es6的一个语法标准，需考虑兼容性；
require是是运行时调用；import是编译时调用，所以必须放在文件开头；
require是赋值过程，import是解构过程；

说说你对模块化的理解

模块化开发：封装细节，提供使用接口，每个模块都是实现某一特定的功能。模块化开发的基础就是函数，独立性是模块的重要特点。

Vue中模板编译原理？

默认.vue文件中的 template处理是通过vue-loader 来进行处理的并不是通过运行时的编译。模板引擎的实现原理就是new Function + with来进行实现的。vue-loader中处理template属性主要靠的是vue-template-compiler。

Vue的性能优化

编码阶段：在更多的情况下，使用v-if替代v-show；key保证唯一；使用路由懒加载、异步组件；第三方模块按需导入；长列表滚动到可视区域动态加载；图片懒加载；如果需要使用v-for给每项元素绑定事件时使用事件代理；等
用户体验：骨架屏、缓存优化
SEO优化：预加载渲染
打包优化：压缩代码；使用cdn加载第三方模块；sourceMap优化；splitChunks抽离公共文件；多线程打包happypack；等

有没有去研究webpack的一些原理和机制,怎么实现的

解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果.
注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应.
从配置的entry入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去.
在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换.
递归完后得到每个文件的最终结果,根据entry配置生成代码块chunk.
输出所有chunk到文件系统.