前端面试题(Vue)

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初始化页面闪动问题

/*css样式*/
[v-cloak] {
      display: none;
    }

<!--html代码-->
<div id="app" v-cloak>
    <ul>
      <li v-for="item in tabs">{{item.text}}</li>
    </ul>
  </div>

46.vue禁止弹窗后的屏幕滚动

//禁止滚动
   stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
    /***取消滑动限制***/
    move(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
    }

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

前端面试题(Vue)

`props`/`$emit`

`$emit`/`$on`

vuex

`$attrs`/`$listeners`

provide/inject

`$parent` / `$children`与 `ref`

前端面试题(Vue)

props/$emit

$emit/$on

vuex

$attrs/$listeners

provide/inject

$parent / $children与 ref

`props`/`$emit`

`$emit`/`$on`

`$attrs`/`$listeners`

`$parent` / `$children`与 `ref`