小编给大家分享一下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有哪些面试题”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。