导航：首页 > 开发技术 >

vue有哪些面试题

发表于：2025-01-20 作者：千家信息网编辑

千家信息网最后更新 2025年01月20日，小编给大家分享一下vue有哪些面试题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、 mvvm框架是什么？ue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变

千家信息网最后更新 2025年01月20日vue有哪些面试题

小编给大家分享一下vue有哪些面试题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

一、 mvvm框架是什么？

ue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

二、 Vue的生命周期

beforeCreate（创建前）$elrenderhtmlel 内容替换el属性指向的html 在数据更新之前调用，发生在虚拟
updated（更新后）在由于数据更改导致的虚拟DOM已经更新，所以可以执行依赖于
beforeDestroy（销毁前） Vue实现数据双向绑定的原理

订阅者模式的方式，通过setter对象传给 Vue 实例来作为它的Object.defineProperty 将它们转为 Vue vue的数据双向绑定作为数据绑定的入口，整合Observer，Observer来解析编译模板指令（vue中是用来解析搭起observer和input变更双向绑定效果。

1.父组件与子组件传值;

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用

undefinedundefinedundefinedundefined

六、v-show和v-if指令的共同点和不同点？

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

undefinedundefinedundefinedundefined

七、如何获取dom?

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

undefinedundefinedundefinedundefined

八、说出几种vue当中的指令和它的用法？

v-model双向数据绑定；
v-for循环；
v-if v-show显示与隐藏；
v-on事件；v-once:只绑定一次。

undefinedundefinedundefinedundefined

九、vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

undefinedundefinedundefinedundefined

十、v-modal的使用

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

undefinedundefinedundefinedundefined

十一、分别简述computed和watch的使用场景

computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子：购物车商品结算的时候
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据

undefinedundefinedundefinedundefined

十二、Vue中双向数据绑定是如何实现的？

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是Object.defineProperty()方法。

undefinedundefinedundefinedundefined

十三、单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

undefinedundefinedundefinedundefined

十四、v-if和v-for的优先级

undefinedundefinedundefinedundefined

十五、assets和static的区别

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

undefinedundefinedundefinedundefined

十六、vue常用的修饰符

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。

undefinedundefinedundefinedundefined

十七、vue-cli如何新增自定义指令？

2.全局指令

<div id="app">

<div v-dir1>div>

<div v-dir2>div>

div>

undefinedundefinedundefinedundefined

十八、vue如何自定义一个过滤器？

JS代码： (msg) 的值作为第一个参数。

undefinedundefinedundefinedundefined

十九、vue路由的钩子函数

首页可以控制导航跳转，titlebeforeEachfromto：from：next：next方法的调用参数。可以控制网页的跳转。

undefinedundefinedundefinedundefined

二十、params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据
params刷新会丢失params里面的数据。