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的优先级

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

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<span segoe="" ui";="" mso-hansi-font-family:"segoe="" ui";mso-bidi-font-family:"segoe="" ui";color:#212529;="" mso-font-kerning:0pt'="">方法的调用参数。可以控制网页的跳转。<span lang="EN-US" segoe="" ui",sans-serif;mso-fareast-font-family:="" 宋体;color:#212529;mso-font-kerning:0pt'="">

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里面的数据。   

undefinedundefinedundefinedundefined

二十一、created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。   

undefinedundefinedundefinedundefined

二十二、RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

方法一：只用a标签，不适用button标签；

方法二：使用button标签和Router.navigate方法   

undefinedundefinedundefinedundefined

二十三、Vue2中注册在router-link上事件无效解决方法

使用@click.native。

原因：router-link会阻止click事件，.native指直接监听一个原生事件。   

二十四、  Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。   

看完了这篇文章，相信你对“vue有哪些面试题”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！