1.vue指令 及其作用
v-cloak: 在vue加载完毕之前有v-cloak这个指令的,当vue加载完毕之后v-cloak这个指令就消失了
v-cloak: 解决了当网速比较慢的时候,页面闪烁的问题
v-text: 不解析html标签;v-html:解析html标签的
<!-- v-pre:跳过编译信息,几乎不用 -->
<!-- v-once:只编译一次,几乎不用 -->
<!-- v-on: 用来绑定事件的,可以简写成@ -->
<!-- 语法格式:v-on:事件类型="事件处理函数" -->
<!-- v-show的值为true时,元素显示;否则隐藏 -->
<!-- v-model:只能用在表单元素上 -->
<!-- v-model实现了数据和视图的双向绑定 -->
<!-- v-bind:用来绑定属性的,可以简写成冒号(:) -->
<!-- 语法格式:v-bind:属性 -->
2.对SPA单页面的理解,它的优缺点分别是什么?
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的Web 应用。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA 不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换 HTML 的内容,从而实现 UI 与用户的交互。由于避免了页面的重新加载, SPA 可以提供较为流畅的用户体验。得益于 ajax,我们可以实现无跳转刷新,又多亏了浏览器的 histroy 机制,我们可以用 hash 的变化来推动界面变化,从而模拟元素客户端的单页面切换效果。
当然任何东西都有两面性,以下是总结目前 SPA 的一些优缺点:
它的优点有三点:
(1)良好的交互式体验,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;
(2)基于上面所说,SPA 对服务器的压力小;
(3)前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理。
它的缺点有四点:
(1)初次加载耗时多,为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载(可以使用路由懒加载解决)
(2)由于单页应用在一个页面中显示,所以不可以使用浏览器自带的前进后退功能,想要实现页面切换需要自己进行管理
(3)SEO 难度较大,由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
(4).有兼容性问题,部分平台不支持pushstate
3.说说你对插槽的理解
4.说一下你对vue过滤器的理解
5.说一下vue数据改变视图不更新有哪几种情况,及解决方式
6.vue生命周期的理解
7.事件
8.修饰符
9.如何创建组件、注册组件、使用组件?
10.如何理解组件化开发、模块化开发、工程化开发?
11.如何使用props实现父子之间的传值?
12.兄弟组件之间传值(你对eventBus,事件搭桥的理解)
13.localstorage 和sessionStorage 的区别?
14.定义时,data为什么一定是函数?
15.说说你对vuex的理解
16.单项数据流
17.vuex的五大核心属性及对应的映射函数
18.说说你对$nextTick 的理解
19.前端路由的模式有几种前端路由的模式有几种?分别是什么
20.路由原理
21.route和router的区别?
22.说说你对keep-alive的理解(两个生命周期函数)
23.什么是路由懒加载?作用是什么?
简述路由的懒加载如何配置 作用是什么:
const routes = [
{
path: '/home',
component: () => import('../components/home')
}
]
减少首屏加载时间,优化代码的性能
24.简述vuex完整的的执行流程?
(1)通过dispatch去提交一个actions
(2)actions接收到这个事件之后,在actions中可以执行一些异步|同步操作,根据不同的情况去分发 给不同的mutations
(3)actions通过commit去触发mutations
(4)mutations去更新state数据,state更新之后,就会通知vue进行渲染
25.简述vuex中分为哪几部分? 每个部分的作用是什么
(1)state(数据):用来存放数据源,就是公共状态
(2)getters(数据加工):有的时候需要对数据源进行加工,返回需要的数据
(3)actions(事件):要执行的操作,可以进行同步或者异步事件
(4)mutations(执行):操作结束之后,actions通过commit更新state数据源
(5)modules:使用单一状态树,致使应用的全部状态集中到一个很大的对象,所以把每个模块的局部状 态分装使每一个模块拥有本身的 state、mutation、action、getters、甚至是嵌套子模块
26.简述路由两种模式的优缺点
27.前端路由和后端路由的区别
1.映射关系不同。前端路由是一个路径映射一个组件,后端路由是一个路径映射一个处理本次请求的响应函教2.前端路由不需要走网络,而后端路由需要走网络。
3.前端路由切换页面不会使得网页刷新,后端路由切换页面会导致网页刷新4.前端路由采用的是客户端渲染,后端路由是服务端渲染。
28.vue项目前端开发环境请求服务器接口跨域问题如何解决?多种方式
1.使用 webpack-dev-server 的 proxyTable 配置: 在 config/indexjs 文件中,设置dev.proxyTable 届性将 API 请求代理到指定的后端服务器上
2.在Node.js 后端服务中添加 CORS (跨域资源共享)配置: 在后端应用中添加 CORS中间件,以允许来自其他域的请求访问该服务。
3.修改服务器端返回的响应头部信息: 在服务器端设置正确的响应头部信息,如 AccessControl-Allow-Origin、Access-Control-Allow-Headers 等
4.使用JSONP 跨域方式: JSONP 可以通过动态创建 script 标签实现跨域请求,但需要服务器端支持。
5.使用 WebSocket 协议: Websocket 协议不受同源策略限制,可以实现跨域通信.
29.定义组件时 为什么不能定义template选项
template选项要想起作用必须借助脚手架进行编译才可以执行,而在运行时的vue中是没有脚手架的,所以处理不了template选项
30.如何理解token?简述使用token进行认证的实现思路:
什么是token :
Token是用户身份的验证方式,通常叫它:令牌。当用户第一次登录后,服务器生成一个Token并将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。
token进行认证的实现思路:
1, 客户端使用用户名和密码请求登录;
2, 服务端收到请求,去验证用户名与密码;
3, 验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端;
4, 客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage 里;
5, 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token;
6, 服务端收到请求,然后去验证客户端请求里面带着的 Token,如果验证成功,就向客户端返 回请求的数据;
31.vue-router中路由守卫分别用在哪些应用场景中 举例说明?
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
一 全局守卫: 是指路由实例上直接操作的钩子函数,特点是所有路由配置的组件都会触发,直白点就是触发路由就会触发这些钩子函数
全局前置守卫 beforeEach(to,from, next)在路由跳转前触发,这个钩子作用主要是用于登录验证,也就是路由还没跳转提前告知,以免跳转了再通知就为时已晚
全局解析守卫 beforeResolve(to,from, next)这个钩子和beforeEach类似,也是路由跳转前触发,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,即在 beforeEach 和 组件内beforeRouteEnter 之后,afterEach之前调用
全局后置守卫 afterEach(to,from)和beforeEach相反,它是在路由跳转完成后触发,对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。不会接受 next函数,也不会改变导航本身。它发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫)之前。这些钩子不会接受next函数也不会改变导航本身
二 独享守卫: 是指在单个路由配置的时候也可以设置的钩子函数
路由独享守卫 beforeEnter(to,from, next)和beforeEach完全相同,如果两个都设置了,beforeEnter则在beforeEach之后紧随执行。在路由配置上直接定义beforeEnter守卫。独享守卫没有后置,可以全局后置路由守卫搭配使用
三 组件守卫: 组件内直接定义路由导航守卫组件内守卫又分为进入守卫和离开守卫
是指在组件内执行的钩子函数,类似于组件内的生命周期,相当于为配置路由的组件添加的生命周期钩子函数
组件进入守卫 beforeRouteEnter(to,from, next),通过路由规则进入该组件时被调用,进入守卫不能访问this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
该钩子在全局守卫beforeEach和独享守卫beforeEnter之后,全局beforeResolve和全局afterEach之前调用,要注意的是该守卫内访问不到组件的实例,也就是this为undefined。因为它在组件生命周期beforeCreate阶段触发,此时的新组件还没有被创建。在这个钩子函数中,可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数
组件更新守卫 beforeRouteUpdadte(to,from, next)
在当前路由改变时,并且该组件被复用时调用,可以通过this访问实例
组件离开守卫 beforeRouteLeave(to,from, next),通过路由规则离开该组件时被调用,
离开守卫通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消
导航离开该组件的对应路由时调用,可以访问组件实例this。这个离开守卫通常用来禁止用户在还未 保存修改前突然离开。该导航可以通过next( false )来取消
32.什么是全局事件总线?如何使用全局事件总线?
是一种组件之间能够互相通讯的方式,如果组件之间想要通讯,必须产生强烈依赖性,但是强依赖不利于整体程序运行,全局事件总线可以实现子组件与父组件之间的通讯,而不产生依赖性
用法:确定好父组件与子组件,相应组件中绑定好自定义事件,假如绑定在第一个组件中,绑定完成后,安装事件总线并进行数据接收,然后提供数据,接收完数据,解绑事件
33.本地存储有几种方式? 区别是什么?
- cookie一般由服务器生成,可以设置过期时间
- localStorage除非被清理,否则一直在
- session Storage页面关闭就清理
- index DB除非清理,否则一直在
34.简述vuex完整的的执行流程?
- 通过dispatch去提交一个actions
- Actions接收这个事件以后在actions中执行一些操作,根据不同情况去分发给不同的mutations
- actions通过commit去触发mutations
- mutations去更新state数据,state更新后,通知vue进行渲染
35.如何理解组件化开发、模块化开发、工程化开发
组件化开发就是针对一个案例根据功能划分成不同的组件,减少代码复用,独立性强
模块化开发,是将一些相关联的方法属性都封装到一个单独的模块里,谁都可以调用,位于业务框架层,模块之间通过接口来调用
工程式开发,定义一个具有一些属性和方法的工厂函数,然后可以批量化生产多个实例,每个实例都继承工厂函数的属性和方法,用软件工程的方法解决前端开发流程中模块化组件化等问题,目的是提高效率降低成本
36. 说一说封装vue组件的过程
1.封装HTML+CSS+VUE到独立的vue文件中,一个vue结尾的文件就是一个组件
2.引入注册组件文件,配置文件
3.使用当前页面做标签使用