首页 > 其他分享 >vue面试题

vue面试题

时间:2023-02-05 18:44:23浏览次数:49  
标签:面试题 vue data 组件 router 数据 页面

1.常见的指令
答v-if v-else v-else if v-bind v-model v-for v-show v-on v-text v-html v-cloak v-once
2.vue的优点
答:1.轻量级框架,值关注视图层
2.双向数据的绑定,在数据操作方面方法更为简单
3组件化:实现了html的封装和重用,在单页面应用有着独特的优势
4虚拟dom,dom操作比较消耗性能,不适用原生dom。(Vue.js通过编译将模版转换成渲染函数(render),执行渲染函数就可以得到一个虚拟DOM)
5视图,数据,结构分离,不需要逻辑上的修改。只需要操作数据就可以。
3.v-model的适用(实现流程)
答v-model用于表单数据的双向绑定,v-bind绑定一个value属性;v-on指令给当前元素绑定input事件。
4.v-if v-show的区别
答:共同点:都能控制元素的显示和隐藏;不同点。v-show只是通过css的display等于none属性,。而v-if是动态的添加或者删除dom元素。
v-show初始开销高,切换开销低,
v-if 初始开销低,切换开销高
5:为什么适用key?在循环的时候
答:需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。
6:修饰符
答:事件修饰符:
.stop(event.stopprogation())防止事件冒泡。
.prevent:等同于JavaScript中的(event.preventDefault())阻止事件的默认行为
.once()只会触发一次
.Capture()与事件冒泡的方向相反,事件捕获由外到内.先触发捕获
按键修饰符
@keyup.13==>@keyup.enter
系统修饰符
.shift .lat .ctrl
表单修饰符(和v-model一起使用)
.trim .number(输入值转为数据类型) .lazy(changge事件改变后在进行同步修改)
7.自定义指令(v-focus)
Vue.directive(“focus”,{
Inserted(el){
El.focus
}
})

8.$nexttick的作用
答:不是数据变化后dom立即变化,而是按照一定的策略进行更新。所以当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,你需要使用$nextTick这个回调,在dom更新循环结束后在执行回调。让修改后的data值渲染更新到dom元素之后在获取,才能成功。
9.vue更新数组时触发视图更新的方法
答:1.push();pop();shift();unshift();splice(); sort();reverse()
2.深拷贝:先拷贝(json.parse(json.stringify)),在push添加

10.vue初始化页面闪动问题
答:因为代码还没有进行解析的,会出去花屏显现:所以用到v-cloak指令(在编译没有解析完成,就隐藏标签)。增加一个样式[v-claok]{display:none}
11.Vue中双向数据绑定是如何实现的?
答:vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的, 通过Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调,实现双向绑定.
12发布者订阅模式和观察者模式的区别
答:观察者模式和发布订阅模式最大的区别就是发布订阅模式有个事件调度中心。观察者模式中观察者和目标直接进行交互,而发布订阅模式中统一由调度中心进行处理,订阅者和发布者互不干扰。这样一方面实现了解耦,

13组件中的 通讯方式
答:1页面之间的通信方式document.cookie seessionstorage localstorage,浏览器的url
2 父子组件的方式(父向子通过属性传值,props来获取)(子向父通过自定义事件,$emit方法发布订阅模式触发父组件传来的自定义事件)
3事件机制: $.on(eventname)来监听事件,$emit(evventname)来触发事件
4ref用来给元素或者子组件来注册引用信息。引用信息将会注册在父组件的$refs对象上

vm.$refs.p (ref="domName" 用法:this.$refs.domName) 5.事件总线$root(子组件用父组件的数据信息,通过this.$root.msg获取)

14.如何让CSS只在当前组件中起作用?
答:在组件中的style前面加上scoped
15..请说出vue.cli项目中src目录每个文件夹和文件的用法?
答:assets文件夹是放静态资源(照片);components是放组件;router是定义路由相关的配置; app.vue是一个应用主组件;main.js是入口文件。
16.computed和watch的区别
答:computed:是计算,通过计算组件中props $emit()传来的值,具有缓存性,当页面重新渲染没有变化时,时不会再执行这个函数的。(一个数据受多个数据影响)
Watch:是监听,通过监听组件中的props和¥emit的操作动作,不具有缓存性,页面渲染时没有变化,也会在执行一遍函数。(一个数据影响多个数据)
17.computed和methods的区别
答:computed都是以Vue的依赖追踪机制为基础的,当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。每次更改数据 computed 都会被调用一次,很浪费资源。
对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数。数据变化了,但是必须调用这个方法,所以节约资源。
18.vue组件中data为什么必须是一个函数?而不是一个对象
答:组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
19.单页面(SPA)应用和多页面(MPA)应用区别及优缺点
答:单页面通俗一点说就是指只有一个主页面的应用,单页面的页面跳转,仅刷新局部资源。多应用于pc端。
多页面就是指一个应用中有多个页面,页面跳转时是整页刷新.
单页面优点:加载速度快,内容的改变不需要重新加载整个页面
单页面缺点:不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
20..assets和static的区别
答:相同点是都用来装静态资源文夹的
不同点是:在在项目打包时,也就是运行npm run build时,会将asset文件下的文夹进行压缩打包,然后放在static文件下进行服务器的上传,statis文件因为不需要进行压缩打包,所有体积比较大,会比较占内存。所以我们自己写的组件中的样式放在asset文件下,我们从第三方引入的文件就放在statis文件下。
21. r跳转和location.href有什么区别
答:location.href进行页面的跳转,会刷新页面
Hisrory.pushstate(“url”)静态跳转,不会刷新页面
Router.push()使用了diff算法,实现了按需加载,减少了dom的消耗。
22.params和query的区别
答:用法:query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
url地址显示:query会把参数显示在地址栏上,params不会把参数显示在url
注意点:query刷新不会丢失query里面的数据
params刷新会丢失 params里面的数据

23.axios与ajax的区别
答:axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。axios是ajax ajax不止axios。
ajax:
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务
axios:
从浏览器中创建XMLHttpRequests;
node.js创建http请求;
支持Promise API;
拦截请求和响应;
转换请求数据和响应数据;
取消请求;
自动换成json。
.客户端支持防止CSRF

39怎么预防csrf攻击
答:验证 HTTP Referer 字段:(根据 HTTP 协议,在 HTTP 头中有一个字段叫 Referer,它记录了该 HTTP 请求的来源地址)
在请求地址中添加 token 并验证:
在 HTTP 头中自定义属性并验证

24.生命周期的作用,什么是生命周期
答:每一个vue实例的时候都会经历一些过程,如数据的监听,编译模板,vue实例化,把实例挂载在dom树上,在数据变化的时候,视图跟着变化,这些过程都会运行着生命周期函数。
总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
Beforecreate:在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法。
Created:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作.(vue实例的数据对象data有了,$el还没有。)
Beforemount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中。(但还是挂载之前为虚拟的dom节点)
Mounted:示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行。
Beforupdate:页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步。
Updated:页面显示的数据和data中的数据已经保持同步了,都是最新的。
Beforedestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
Destoryed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。
Activated:被 keep-alive 缓存的组件激活时调用.
Deactivated:被 keep-alive 缓存的组件停用时调用。
errorCaptured:当子孙组件有错误时会被调用,此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
25.created和mounted的区别
答:created是在模板渲染成html之前调用,通常初始化某些属性值,然后再渲染成视图。
Mounted是在模板渲染成html后调用,这样就可以对html的dom节点就行操作啦。
26mvvm和mvc 和mvp模式之间的区别
答:mvc的模式是(视图,数据,控制器controller),view依赖model,所以view无法组件化
1视图给控制器传送指令
2控制器完成业务逻辑后要求model改变状态
3 model将新的数据改变后传给view

Mvp模式(presenter)view不依赖model,可以组件化,但是model和view需要手动来通不能逻辑,比较麻烦。
View 与 Model 不发生联系,都通过 Presenter 传递。所有逻辑都在presenter里
Mvvm模式
1View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上

 Observer :数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现
  Compile  :指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
  Watcher  :订阅者,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数
Dep :消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法
当数据发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到通知后对视图进行相应的更新。

26.怎么定义 vue-router 的动态路由? 怎么获取传过来的值?
答:在path属性加上/: id,通过$route.params.id 来获取
27$router与$route的区别
答:$router是VueRouter的实例,可以使用里面的方法。使用$router.push方法。$router.to()
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等属性。
28vue-router 有哪几种导航钩子?(当路由发生变化,导航守卫通过跳转或者取消的方式来进行守卫导航)
答:3种。全局导航守卫,路由导航守卫,组件导航守卫,
第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截
To为要跳到的页面,from为来自的页面,next()回调函数。
第二种:单独路由独享组件router.beforeEnter(to,from,next)
第三种:组件内的钩子。router.beforerRouterEnter(to,from,next)
router.beforerRouterupdate(to,from,next)
router.beforerRouterupLeave(to,from,next)

完整的导航流程:组件内的 router.beforerRouterupLeave >全局的router.beforeEach=>
组件内的更新 router.beforerRouterupdate ===>路由的导航 router.beforeEnter ==>组件内的 router.beforerRouterEnter
29.vue-router的两种模式(即地址栏 URL 中的 # 符号)
答:hash模式:通过window.location.hash 来进行切换。Window.onhashchange来监听路由,(可以使用事件监听addEventlisten 来监听onhashchange,这样就不影响其他的事件)
History模式:通过h5history新添加pushState() 和 replaceState() 方法来 进行切换。监听路经的切换要用window.onpopstate()
注意一点:调用history.pushstate()不会触发indow.onpopstate()事件,只有浏览器有动作时才会触发监听事件,(history.go /back /forward)
Hash优点:(1) 只需要前端配置路由表, 不需要后端的参与
(2) 兼容性好, 浏览器都能支持
(3) hash值改变不会向后端发送请求, 完全属于前端路由
History的缺点 :(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面,用户匹配不到静态资源的情况, 否则会出现404错误
(2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.
30.vue-router实现路由懒加载
答:第一种:vue异步组件技术 返回一个promise工厂函数,resolve函数reuqire()方法返回组件的本身。
第二种:路由懒加载(使用es6中的import)。
第三种:webpack提供的require.ensure(),vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
31vuex(状态管理模式,就是用来装数据的)
答:五大核心state mutations actions getter modules
State就是状态值,
Mutations:就是为了同步修改状态值的,并且把state作为参数传进去。怎么触发mutations?,通过$store.commit()方法
Actions:是异步行为,提交到mutations,而不是直接变更状态。接受一个与$store实例具有相同属性和方法的context参数。通过context.commit()提交到mutations。怎么触发actions?通过$store.dispatch()方法触发
Getter:就是store里面的计算属性
Modules:就是模块化,每一个模块都可以拥有这五大核心

32.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
答:如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的actions里。如果被其他地方复用,请将请求放入action里,方便复用。

33 keep-alive 的作用(2个生命周期钩子)
答用来包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
有3个属性
1.Include:字符串或正则表达式。要缓存的组件
2.Exclude:字符串或正则表达式。不要缓存的组件
3.Max: 数字。最多可以缓存多少组件实例

34自定义一个过滤器(全局和组件内的过滤器)
{{msg | capitalize}} | 为通道
答:
35.vue的二大核心
答:数据驱动,组件系统
36.v-if与v-for能不能一起使用
答:不建议一起使用,因为v-for的优先级高于v-if,每次v-for执行,都会执行以下v-if,造成不不必要的计算

37.axios的二次封装
答 :1.配置请求头的信息
1.1baseURL
1.2timeout请求时间
1.3transformRequest` 允许在向服务器发送前,修改请求数据,只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法

 2拦截器

答:请求拦截器,判断config.data[token]==”标识”

对返回的数据进行拦截,过滤data数据

38sass与less 和css的区别
传统的css可以直接被html引用,sass和less使用了类似JavaScript的方式去书写,
因为CSS没有变量、函数、SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用

1两者编译环境不一样(Sass的安装需要Ruby环境,是在服务端bai处理的,而Less是需要引入less.js来处理Less,在客户端处理)
2变量符不一样,作用域也不一样(less是@,而scss是$,而且它们的作用域也不一样,less是块级作用域)
3输出设置不一样(Less没有输出设置,sass提供4种输出选项,nested,compact,compressed和expanded nested)
4.Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持
5.继承方式不同

标签:面试题,vue,data,组件,router,数据,页面
From: https://www.cnblogs.com/zw100655/p/16274161.html

相关文章