vue面试题

1.vue优点？

①轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb

②双向数据绑定：保留了angular的特点，在数据操作方面更为简单

③组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势

④视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作

⑤虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式

⑥运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势

⑦低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变

⑧可重用性：可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑

⑨独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

 

2.Vue的一系列生命周期？

（一）什么是 vue 生命周期？有什么作用？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。

（二）第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

（三）简述每个周期具体适合哪些场景

①beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

②create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

③beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

④mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

⑤beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

⑥updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

⑦beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

⑧destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

（四）created和mounted的区别

①created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

②mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

（五）vue获取数据在哪个周期函数

一般 created/beforeMount/mounted 皆可。如果 DOM进行操作 , 那肯定 mounted 时候才能操作。

（六）请详细说下你对vue生命周期的理解？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

①创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

②载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

③更新前/后：当data变化时，会触发beforeUpdate和updated方法。

④销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

 

3.Vue中双向数据绑定是如何实现的？

①vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

②核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法

③v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1.v-bind绑定一个value属性；2.v-on指令给当前元素绑定input事件

 

4.Vue中的传递数据？

（一）父组件向子组件传递数据。

①父组件通过标签上:data=data方式定义传值

②子组件通过props方法接受数据

（二）子组件向父组件传递数据。

①在子组件中通过this.$parent.event来调用父组件的方法

②在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了

注意：Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递。

 

5.v-show和v-if指令的共同点和不同点？

①共同点：都能控制元素的显示和隐藏

②不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

 

6.v-if和v-for的优先级

①当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。

②如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

 

7.vue常用的修饰符

①.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

②.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

③.capture：与事件冒泡的方向相反，事件捕获由外到内

④.self：只会触发自己范围内的事件，不包含子元素

⑤.once：只会触发一次

 

8.如何让CSS只在当前组件中起作用？

在组件中的style前面加上scoped

9.<keep-alive></keep-alive>的作用是什么?

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

10.如何获取dom?

ref="domName" 用法：this.$refs.domName

 

11.说出几种vue当中的指令和它的用法？

①v-model：双向数据绑定

②v-for：循环

③v-if 与v-show：判断是否显示、隐藏

④v-on：可以简写语法糖为'@'，表示事件

⑤v-once: 只绑定一次，该数据只有在初始化的时候会发生改变

⑥v-bind：可以简写语法糖为':'，绑定一个属性
 

12.为什么使用key?

①当有相同标签名的元素切换时，为避免渲染问题，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们。

②需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。

③作用主要是为了高效的更新虚拟DOM。

 

13.分别简述computed和watch的使用场景

（一）computed

①computed是计算属性，也就是计算值，它更多用于计算值的场景

②computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

③computed适用于计算比较消耗性能的计算场景

④当一个属性受多个属性影响的时候就需要用到computed

⑤最典型的例子： 购物车商品结算的时候

（二）watch

①watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

②无缓存性，页面重新渲染时值不变化也会执行

③当一条数据影响多条数据的时候就需要用watch，例子：搜索数据

 

14.v-on可以监听多个方法吗？

可以，例子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

 

15.$nextTick的使用

当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

 

16.单页面应用和多页面应用区别及优缺点

①单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

②多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

③单页面的优点：1.无刷新体验,提升了用户体验；2.前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；3.API 共享，同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端；4.用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；5.前后端分离,页面效果会比较炫酷（比如切换页面内容时的专场动画）

④单页面缺点：1.不利于seo的优化，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；2.初次加载时耗时多，页面复杂度提高很多；3.不支持低版本的浏览器，最低只支持到IE9

 

17.assets和static的区别

①相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点

②不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

 

18.vue和jQuery的区别

①jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();它还是依赖DOM元素的值。

②Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

 

19. vue slot

简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

 

20.vue更新数组时触发视图更新的方法

push()；pop()；shift()；unshift()；splice()； sort()；reverse()

 

21.router和route的区别 

（一）router

①router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

②$router.push({path:'home'});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

③$router.replace({path:'home'});//替换路由，没有历史记录

（二）route

①route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

②$route.path：字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。

③$route.params：对象，包含路由中的动态片段和全匹配片段的键值对

④$route.query：对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == 'yes' 。

⑤$route.router：路由规则所属的路由器（以及其所属的组件）。

⑥$route.matched：数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

⑦$route.name：当前路径的名字，如果没有使用具名路径，则名字为空。

 

22.vue-router

（一）vue-router 是什么?它有哪些组件

vue用来写路由一个插件。router-link、router-view

（二）怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。

（三）vue-router 有哪几种导航钩子?

三种。①是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

②组件内的钩子

③单独路由独享组件

（四）vue-router的两种模式

①hash模式：即地址栏 URL 中的 # 符号

②history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。

（五）vue-router实现路由懒加载（ 动态加载路由 ）

①vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。

②路由懒加载(使用import)。

③webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

 

23.vuex

（一）vuex是什么？怎么使用？哪种功能场景使用它？

①vue框架中状态管理。

②在main.js引入store注入。新建一个目录store 。

③场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

（二）vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

① vuex的State特性

Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。

state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

②vuex的Getter特性

getters 可以对State进行计算操作，它就是Store的计算属性。

虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。

如果一个状态只在一个组件内使用，可以不用getters。

③vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。mutations => 提交更改数据的方法，同步。actions => 像一个装饰器，包裹mutations，使之可以异步。

④modules => 模块化Vuex

（三）不用Vuex会带来什么问题？

①可维护性会下降，想修改数据要维护三个地方；

②可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

③增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背。
 

24.VNode是什么？虚拟 DOM是什么？

①Vue在页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。

②“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。

 

25.绑定class的数组用法

①对象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”

②数组方法v-bind:class="[class1,class2]"

③行内v-bind:style="{color:color,fontSize:fontSize+'px'}”