VUE面试题
1.vue生命周期的理解
- beforeCreat() 创建前 在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在此生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
- created()被创建 data 和 methods都已经被初始化好了,可以调用了
- beforeMount() 挂载前 在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
- mounted()已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
- beforeupdate()更新前 页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
- updated()更新 页面显示的数据和data中的数据已经保持同步了,都是最新的
- beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
- destroyed()被销毁 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。
2.第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
3.简述每个周期具体适合哪些场景
beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
4.created和mounted的区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
5.mvvm 框架是什么?
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
模型指的是后端传递的数据。
视图指的是所看到的页面。
视图模型是mvvm模式的核心,它是连接view和model的桥梁。
它有两个数据传递方向:
一是将模型转化成视图,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
二是将视图转化成模型,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。
以上两个方向都实现的,我们称之为数据的双向绑定。
总结:在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听 到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
6.vue-router 有哪几种导航钩子?
- 全局守卫:
router.beforeEach
- 全局解析守卫:
router.beforeResolve
- 全局后置钩子:
router.afterEach
- 路由独享的守卫:
beforeEnter
- 组件内的守卫:
beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
导航
表示路由正在发生改变,vue-router 提供的导航守卫主要用来:
通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的
,单个路由独享的
, 或者组件级的
。注意:
参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过 观察 $route 对象 来应对这些变化,或使用beforeRouteUpdate
的组件内守卫。
7.route和router 的区别
- $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等
- $router对象是全局路由的实例,是router构造方法的实例
8.vue-router实现路由懒加载
- vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件
- 组件懒加载方案二 路由懒加载(使用import)
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
-
webpack提供的require.ensure()vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
9.vue优点
10.vue父组件向子组件传递数据?
11..子组件像父组件传递事件
12.v-show和v-if指令的共同点和不同点
13.如何让CSS只在当前组件中起作用
14.如何获取dom
15.说出几种vue当中的指令和它的用法?
16.vue-loader是什么?使用它的用途有哪些?
- 解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template,再分别把他们交给对应的loader去处理
- js可以写es6,style样式可以写scss或less、template可以加jade等
- css-loader:加载由vue-loader提取出的CSS代码
17.为什么使用key
18.分别简述computed和watch的使用场景
computed
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子: 购物车商品结算的时候
watch
当一条数据影响多条数据的时候就需要用watch
搜索数据
19.$nextTick的使用
20.vue组件中data为什么必须是一个函数
组件中的data
写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data
,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data
,就会造成一 个变了全都会变的结果
21.组件间的通信
22.渐进式框架的理解
Vue渐进式-先使用Vue的核心库,再根据你的需要的功能再去逐渐增加加相应的插件。
渐进式代表的含义是:主张最少。
每个框架都不可避免的会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,他的强势程度会影响在业务开发中的使用方式。
23.Vue中双向数据绑定是如何实现的
1.监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
24.单页面应用和多页面应用区别及优缺点
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新
单页面的优点:
1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
2,前后端分离
3,页面效果会比较炫酷(比如切换页面内容时的专场动画)
单页面缺点:
1,不利于seo
2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
3,初次加载时耗时多
4,页面复杂度提高很多
25.vue中过滤器有什么作用及详解
26.v-if和v-for的优先级
27.assets和static的区别
28.vue常用的修饰符
1、.lazy:输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据
2、.trim:输入框过滤首尾的空格
3、.number:先输入数字就会限制输入只能是数字,先字符串就相当于没有加number,注意,不是输入框不能输入字符串,是这个数据是数字
4、.stop:阻止事件冒泡,相当于调用了event.stopPropagation()方法
5、.prevent:阻止默认行为,相当于调用了event.preventDefault()方法,比如表单的提交、a标签的跳转就是默认事件
6、.self:只有元素本身触发时才触发方法,就是只有点击元素本身才会触发。比如一个div里面有个按钮,div和按钮都有事件,我们点击按钮,div绑定的方法也会触发,如果div的click加上self,只有点击到div的时候才会触发,变相的算是阻止冒泡
7、.once:件只能用一次,无论点击几次,执行一次之后都不会再执行
8、.capture:事件的完整机制是捕获-目标-冒泡,事件触发是目标往外冒泡
9、.sync对prop进行双向绑定
10、.keyCode:监听按键的指令,具体可以查看vue的键码对应表
29.数组更新检测
vue能不能检测到数组的变化并更新,取决于原生js的数组方法,
如果原生js方法(vue变异方法)能够修改原数组,那么vue就可以检测到变化并更新(例如push等方法)
如果原生js方法(vue非变异方法)不能够修改原数组,而是返回一个新数组,那么vue也可以检测到变化并更新,
前提是使用这些方法时要把新数组返回出来去替换掉旧数组
30.Vue.set视图更新
31.vue的两个核心点
1、数据驱动:在vue中,数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新,而vue只需要改变数据。
2、组件:组件化开发,优点很多,可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后(vue组件封装方法),就能高度的复用,提高代码的可重用性。一个页面/模块可以由多个组件所组成。
32.vue和jQuery的区别
jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val();
,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定
33.三大框架的对比
angular(MVW):
在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。
vue(mvvm):
1、轻量级框架
2、在性能上,Vue.js使用基于依赖追踪的观察并且使用异步队列更新,所有的数据都是独立触发的。
3、在状态管理方面,使用的是vuex
vue比angular和react的运行速度快。
react (mvc):
1、React采用特殊的JSX语法。
2、React采用特殊的JSX语法,React采用的Virtual DOM会对渲染出来的结果做脏检查。
3、在状态管理方面,使用的是Redux
34.delete和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变
Vue.delete 直接删除了数组 改变了数组的键值
35.SPA首屏加载慢如何解决
- 减小入口文件体积:路由懒加载,把不同的路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加
- 静态资源本地缓存:前端合理利用localStorage、采用Service Worker 离线缓存
- UI框架按需加载
- 图片资源压缩
- 开启GZip压缩
- 使用SSR:组件或页面通过服务器生成html字符串,再发送到浏览器
36.Vue-router跳转和location.href有什么区别
37.vue项目是打包了一个js文件,一个css文件,还是有多个文件?
38.vue遇到的坑,如何解决的?
vue多个路由绑定到同一个组件上,造成created只执行一次:检测路由变化
自定义验证规则时导致validate不能执行:callback()
39.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?
Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决
40.Vue2中注册在router-link上事件无效解决方法
使用 @click.native 。原因:router-link会阻止click事件,.native指直接监听一个原生事件
41.RouterLink在IE和Firefox中不起作用(路由不跳转)的问题
只用a标签,不适用button标签;
使用button标签和Router.navigate方法
42.axios的特点有哪些
- 从浏览器中创建XMLHttpRequests;
- node.js创建http请求;
- 支持Promise API;
- 拦截请求和响应;
- 转换请求数据和响应数据;
- 取消请求;
- 自动换成json。
- axios中的发送字段的参数是data跟params两个,两者的区别在于params是跟请求地址一起发送的,data的作为一个请求体进行发送
- params一般适用于get请求,data一般适用于post put 请求。
43.vue 各种组件通信方法
-
props
/$emit
-
$emit
/$on
-
vuex
-
$attrs
/$listeners
-
provide/inject
-
$parent
/$children
与ref
44.params和query的区别
45.vue初始化页面闪动问题
1 2 3 4 5 6 7 8 9 10 11 |
|
46.vue禁止弹窗后的屏幕滚动
1 2 3 4 5 6 7 8 9 10 11 12 |
|
47.vue父组件和子组件生命周期钩子执行顺序
1、加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2、子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
3、父组件更新过程
父beforeUpdate->父updated
4、销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
48.Vue.nextTick实现原理https://www.cnblogs.com/liuhao-web/p/8919623.html