vue常见⾯试题总结（经常会被问到的问题）
1. Vue.js是什么？
jquery是什么功能组件
Vue.js是⼀套构建⽤户界⾯渐进式前端框架（⽤到哪⼀块就⽤哪⼀块，不需要全部⽤上），Vue 的核⼼库只关注视图层，另⼀⽅⾯，Vue 完全有能⼒驱动采⽤单⽂件组件和 Vue ⽣态系统⽀持的库开发的复杂单页应⽤。
Vue.js 的⽬标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2. Vue.js有那些优点？
1. 响应式的数据绑定
这⾥的响应式不是@media 媒体查询中的响应式布局，⽽是指vue.js会⾃动对页⾯中某些数据的变化做出响应。
2. 组件式开发
可维护、可重⽤、可测试，也就是⼀个页⾯由多个组件组合⽽成。
Vue.js通过组件，把⼀个单页应⽤中的各种模块拆分到⼀个⼀个单独的组件（component）中，我们只要先在⽗级应⽤中写好各种组件标签（占坑），并且在组件标签中写好要传⼊组件的参数（就像给函数传⼊参数⼀样，这个参数
3. jQuery和Vue的区别
1. jQuery⾸先要获取到dom对象，然后对dom对象进⾏进⾏值的修改等操作
2. Vue是⾸先把值和js对象进⾏绑定，然后修改js对象的值，Vue框架就会⾃动把dom的值就⾏更新。
3. 可以简单的理解为Vue帮我们做了dom操作，我们以后⽤Vue就需要修改对象的值和做好元素和对
象的绑定，Vue这个框架就会⾃动帮我们做好dom的相关操作
4. 这种dom元素跟随JS对象值的变化⽽变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的值的变化⽽变化就叫做双向数据绑
定
4. MVVM模式是什么？（双向数据绑定）
MVVM即model，view，viewmodel，它是数据驱动模式，即所有的⼀切通过操作数据来进⾏，⽽尽量避免操作dom树。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel就是⼀个同步View 和 Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，⽽是通过ViewModel进⾏交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，⽽Model 数据的变化也会⽴即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，⽽View 和 Model 之间的同步⼯作完全是⾃动的，⽆需⼈为⼲涉，因此开发者只需关注业务逻辑，不需要⼿动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统⼀管理。
5. mvvm模式和其它框架（jquery）的区别是什么？哪些场景适合？
区别：vue数据驱动，通过数据来显⽰视图层⽽不是节点操作。
场景：数据操作⽐较多的场景，更加便捷
6. 什么是单页⾯应⽤及其优缺点
单页⾯应⽤（SPA），通俗⼀点说就是指只有⼀个主页⾯的应⽤，浏览器⼀开始要加载所有必须的 html, js, css。所有的页⾯内容都包含在这个所谓的主页⾯中。但在写的时候，还是会分开写（页⾯⽚段），然后在交互的时候由路由程序动态载⼊，单页⾯的页⾯跳转，仅刷新局部资源。多应⽤于pc端。
优点：
1. ⽤户体验好，快，内容的改变不需要重新加载整个页⾯，基于这⼀点spa对服务器压⼒较⼩。
2. 前后端分离。
3. 页⾯效果会⽐较炫酷（⽐如切换页⾯内容时的专场动画）。
缺点：
1. 不利于seo。（因为搜索引擎只认识html中的内容，不认识js中的把内容）
2. 导航不可⽤，如果⼀定要导航需要⾃⾏实现前进、后退。（由于是单页⾯不能⽤浏览器的前进后退功能，所以需要⾃⼰建⽴堆栈管
理）。
3. 初次加载时耗时多。
4. 页⾯复杂度提⾼很多。
多页⾯应⽤（MPA）
多页⾯（MPA），就是指⼀个应⽤中有多个页⾯，页⾯跳转时是整页刷新。
⾸屏时间快（只经历了⼀个http请求的时间）；seo效果好；页⾯切换慢（每次请求都需要发⼀次http请求）
7. vue⼏种常⽤的指令？
v-for 、 v-if 、v-show、v-bind、v-on、v-else、v-text
8. vue常⽤的修饰符？？
.prevent: 提交事件不再重载页⾯；.stop: 阻⽌单击事件冒泡；.self: 当事件发⽣在该元素本⾝⽽不是⼦元素的时候会触发；.capture: 事件侦听，事件发⽣的时候会调⽤
9. vue中的v-show和v-if的区别？
两个都能根据真假切换元素的显⽰和隐藏。
V-show是对class样式切换；v-if是对Dom元素切换；频繁切换⽤v-show，切换消耗⼩，反之⽤v-if，运⾏条件很少改变
当v-if被打开或关闭时，它将创建并完全销毁该元素。相反，v-show 将创建该元素并将其保留在那⾥，通过设置其样式为display:none来隐藏他
如果要切换的组件的渲染成本很⾼，那么这样做会更有效率。
反过来说，如果不需要⽴即执⾏昂贵的组件，可以使⽤v-if，这样他就会跳过渲染它，使页⾯加载速度更快⼀些
可参考：
10. Vue中v-for v-if ⼀起使⽤的优先级
当它们处于同⼀节点，v-for的优先级⽐v-if更⾼，这意味着 v-if将分别重复运⾏于每个 v-for循环中, 如果要实现渲染满⾜条件的li节点时，可以这样⽤
<ul>
<li v-for="item in items" v-if="item.show">{{item}}</li>
</ul>
但是不推荐同时使⽤ v-if 和 v-for。
如果要同时使⽤，⼀般我们在两种常见的情况下会倾向于这样做：
1、为了过滤⼀个列表中的项⽬ (⽐如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为⼀个计算属性 (⽐如 activeUsers)，让其返回过滤后的列表。
2、 如果你的⽬的是有条件地跳过循环的执⾏，那么可以将 v-if 置于外层元素(⽐如 ul, ol)。
<ul v-if="items.length">
<li v-for="item in items">{{item}}</li>
</ul>
11. 你对vue⽣命周期的理解怎么样？
vue的⽣命周期就是vue实例的创建运⾏销毁的⼀个过程，在不同的阶段会触发不同的函数，这些函数也就是⽣命周期函数，⽐如create，在实例创建数据已经完毕，能够做⼀些数据的初始化，但是dom还没有渲染，mounted页⾯数据全部渲染完毕，可以在此函数内部操作dom
12. Vue的⽣命周期
⽣命周期钩⼦触发的⾏为在这阶段可操作的例⼦
beforeCreate vue实例的挂载元素$el和数据data都为undefined，还未初始化。可在这加个loading事件
created vue实例的数据data有了，$el还没有，DOM未⽣成结束loading，还可从服务器获取⼀些初始化的
数据
beforeMount vue实例的$el和data都初始化了，但还是虚拟的dom节点，页⾯还未被渲染。先把坑占住，到后⾯mounted挂载的时候再把值渲染进去。
mounted vue实例挂载完成，虚拟的DOM变成真实DOM 在这发起后端请求，拿回数据，配合路由钩⼦做⼀些事情；可操作DOM节点
beforeUpdate data中的数据发⽣改变，还没有重新渲染之前调⽤
updated data中的数据发⽣改变，重新渲染之后调⽤数据更新时，做⼀些处理（此处也可以⽤
watch进⾏观测）
beforeDestroy组件销毁前调⽤给⽤户提⽰，⽐如“您确定删除xxx吗？移除定
时器或者事件绑定”
destroyed 组件销毁后调⽤，vue实例解除了事件监听以及和dom的绑定（⽆响应了），但DOM
节点依旧存在
当前组件已被删除，清空相关内容
除了这8个还有另外2个
activated使⽤keep-alive，组件被激活时调⽤，每次进⼊都会执⾏钩⼦中的函数
deactivated使⽤keep-alive，组件被移除时调⽤
13. vue中 key 值的作⽤？？
为了给 Vue ⼀个提⽰，以便它能跟踪每个节点的⾝份，从⽽重⽤和重新排序现有元素；
数据发⽣改变，只是将对应的对象重新排序；未改变的对象，不会重新创建，进⽽提升效率；
key 值是每项都有唯⼀ id（唯⼀标识）
14. 什么是vue的计算属性？
在模板中放⼊太多的逻辑会让模板过重且难以维护，在需要对数据进⾏复杂处理，且可能多次使⽤的情况下，尽量采取计算属性的⽅式。
好处：
①使得数据处理结构清晰；
②依赖于数据，数据更新，处理结果⾃动更新；
③计算属性内部this指向vm实例；
④在template调⽤时，直接写计算属性名即可；
⑤常⽤的是getter⽅法，获取数据，也可以使⽤set⽅法改变数据；
⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。
15. 计算属性 computed 和 watch 的区别？
computed：当页⾯中有某些数据依赖其他数据进⾏变动的时候，可以使⽤计算属性。
watch：监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的⽅法；数据变化时执⾏异步或开销较⼤的操作，可以随时修改状态的变化。
通俗来讲，既能⽤computed 实现⼜可以⽤ watch 监听来实现的功能，推荐⽤ computed，重点在于 computed 的缓存功能
可参考：
16. Vue路由有哪⼏种模式？
vue-router 有 3 种路由模式：hash、history、abstract
hash 能兼容到IE8， history 只能兼容到 IE10
vue-router中默认使⽤的是hash模式，也就是会出现如下的URL，URL中带有#号：
HTML5的History模式，它使url看起来像普通⽹站那样，以“/”分割，没有#，单页⾯并没有跳转
开启history模式后⾃动去除#，开启history模式需要后台配合；
我们可以⽤如下代码修改成history模式：
import Vue from'vue'
import Router from'vue-router'
import Main from'@/components/Main'
Vue.use(Router)
export default new Router({
mode:'history',
routes:[
{
path:'/',
component: Main
}
]
})
可参考：
17. Vue组件传值有哪⼏种⽅式？
1. ⽗传⼦
⽗传⼦的实现⽅式就是通过props属性，⼦组件通过props属性接收从⽗组件传过来的值，⽽⽗组件传值的时候使⽤ v-bind 将⼦组件中预留的变量名绑定为data⾥⾯的数据即可。
2. ⼦传⽗
⼦组件中需要以某种⽅式例如点击事件的⽅法来触发⼀个⾃定义事件；⼦组件给⽗组件传参⽤this.$emit(‘事件名’，携带的内容）,⽗组件在相应的位置监听事件
3. ⾮⽗⼦组件间传值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。