温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue有哪些面试题

发布时间:2021-11-03 10:52:18 来源:亿速云 阅读:116 作者:小新 栏目:编程语言

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

、  mvvm框架是什么?   

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

二 、  Vue的生命周期

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

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

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

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

undefinedundefinedundefinedundefined

六、v-showv-if指令的共同点和不同点?

        当 v-if v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-ifv-for同时使用。
        如果v-ifv-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可以写es6style样式可以scsslesstemplate可以加jade等   

undefinedundefinedundefinedundefined

十、v-modal的使用

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

undefinedundefinedundefinedundefined

十一、分别简述computedwatch的使用场景

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

undefinedundefinedundefinedundefined

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

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

undefinedundefinedundefinedundefined

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

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

undefinedundefinedundefinedundefined

十四、v-ifv-for的优先级

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

undefinedundefinedundefinedundefined

十五、assetsstatic的区别

        相同点:assetsstatic两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点
        不相同点: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路由的钩子函数

首页可以控制导航跳转,titlebeforeEachfromtofromnextnext<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

二十、paramsquery的区别

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

undefinedundefinedundefinedundefined

二十一、createdmounted的区别

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

undefinedundefinedundefinedundefined

二十二、RouterLinkIEFirefox中不起作用(路由不跳转)的问题

方法一:只用a标签,不适用button标签;

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

undefinedundefinedundefinedundefined

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

使用@click.native

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

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

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI