前端日记

面试官：Vue常用的修饰符有哪些有什么应用场景 一、修饰符是什么在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号 在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 二、修饰符的作用表单修饰符在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model 关于表单的修饰符有如下： lazy trim number lazy在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步 12<input type="text" v-model.lazy="value"><p>{{value}}</p> trim自动过滤用户输入的首空格字符，而中间的空格不会过滤 1<input type="text& ...

面试官：Vue实例挂载的过程 一、思考我们都听过知其然知其所以然这句话 那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么？ 过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等 一、分析首先找到vue的构造函数 源码位置：src\core\instance\index.js 12345678function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options)} options是用户传递过来的配置项，如data、methods等常用的方法 vue构建函数调用_init方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初 ...

面试官：Vue中的$nextTick有什么作用？ 一、NextTick是什么官方对其的定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 什么意思呢？ 我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新 举例一下 Html结构 1<div id="app"> {{ message }} </div> 构建一个vue实例 123456const vm = new Vue({ el: '#app', data: { message: '原始值' }}) 修改message 123this.message = '修改后的值1'this.message = '修改后的值2'this.message = '修改 ...

面试官：Vue.observable你有了解过吗？说说看 一、Observable 是什么Observable 翻译过来我们可以理解成可观察的 我们先来看一下其在Vue中的定义 Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器 1Vue.observable({ count : 1}) 其作用等同于 1new vue({ count : 1}) 在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，它和被返回的对象是同一个对象 在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的 二、使用场景在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择 创建一个js文件 12345678910111213141 ...

面试官：vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？ 一、是什么权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说，所有的请求发起都触发自前端路由或视图 所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实现的目标是： 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页 视图方面，用户只能看到自己有权浏览的内容和有权操作的控件 最后再加上请求控制作为最后一道防线，路由可能配置失误，按钮可能忘了加权限，这种时候请求控制可以用来兜底，越权请求将在前端被拦截 二、如何做前端权限控制可以分为四个方面： 接口权限 按钮权限 菜单权限 路由权限 接口权限接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录 登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token ...

面试官：v-show和v-if有什么区别？使用场景分别是什么？ 一、v-show与v-if的共同点我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示 在用法上也是相同的 12<Model v-show="isShow" /><Model v-if="isShow" /> 当表达式为true的时候，都会占据页面的位置 当表达式都为false时，都不会占据页面位置 二、v-show与v-if的区别 控制手段不同 编译过程不同 编译条件不同 控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换 编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时， ...

面试官：说说你对slot的理解？slot使用场景有哪些？ 一、slot是什么在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符 该占位符可以在后期使用自己的标记语言填充 举个栗子 123456789<template id="element-details-template"> <slot name="element-name">Slot template</slot></template><element-details> <span slot="element-name">1</span></element-details><element-details> <span slot="element-name">2</span></element-details> template不会展示到页面 ...

面试官：你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢 一、什么是SPASPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构如下图 我们熟知的JS框架如react,vue,angular,ember都属于SPA 二、SPA和MPA的区别上面大家已经对单页面有所了解了，下面来讲讲多页应用MPA（MultiPage-page application），翻译过来就是多页应用在MPA中，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载html、css、js文件， ...

面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？ 一、是什么Server-Side Rendering 我们称其为SSR，意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程 先来看看Web3个阶段的发展史： 传统服务端渲染SSR 单页面应用SPA 服务端渲染SSR 传统web开发网页内容在服务端渲染完成，⼀次性传输到浏览器 打开页面查看源码，浏览器拿到的是全部的dom结构 单页应用SPA单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染 打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容 服务端渲染SSRSSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行 看完前端发展，我们再看看Vue官方对SSR的解释： Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为 ...

面试官：说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？ 一、为什么要划分使用vue构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高 在划分项目结构的时候，需要遵循一些基本的原则： 文件夹和文件夹内部文件的语义一致性 单一入口/出口 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用 公共的文件应该以绝对路径的方式从根目录引用 /src 外的文件不应该被引入 文件夹和文件夹内部文件的语义一致性我们的目录结构都会有一个文件夹是按照路由模块来划分的，如pages文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹 这样做的好处在于一眼就从 pages文件夹看出这个项目的路由有哪些 单一入口/出口举个例子，在pages文件夹里面存在一个seller文件夹，这时候seller 文件夹应该作为一个独立的模块由外部引入，并且 seller/index.js 应该作为外部引入 seller 模块的唯一入口 12345// 错误用法import seller ...