看看这3道必问面试题,检验你的Vue掌握程度!

本篇文章给大家整理分享3道vue必问面试题,检验一下大家对vue的掌握程度,看看你是否都能答对!

看看这3道必问面试题,检验你的Vue掌握程度!

问题1: v-show 与 v-if 有什么区别?

此题属于考察面试者的Vue基础情况,一般只要用过Vue肯定会用到v-show 与 v-if。(学习视频分享:vue)

v-if 指令用于条件性地渲染一块内容,而v-show也用于条件性展示元素。

使用v-show的元素会被渲染并保留在 DOM 中,并使用CSS的display来控制元素的显示和隐藏。v-show 不支持 元素,也不支持 v-else。

立即学习“前端免费学习笔记(深入)”;

使用v-if 是“真正”的条件渲染,元素的事件监听器和子组件都会被销毁和重建。v-if 也是惰性的,如果初始条件为false,则并不会渲染,直到变为true才会触发第一次渲染。而v-show不管条件是什么都会渲染,并根据display属性来控制显示隐藏。

一般来说,v-if的切换开销更大,而v-show只有初始渲染开销,如果元素需要频繁地切换,使用v-show,如果条件很少改变,则使用v-if更好。

问题2:v-model 的原理?

v-model指令主要用来在、、

v-model会根据不同的元素来触发不同的事件:

text 和 textarea 元素使用input 事件;checkbox / radio 和 select使用change 事件;

拿input表单举例:

登录后复制

如果在自定义组件中:

  1. {{value}}
    export default { props:{ value: String }, methods: { test1(){ this.$emit('input', '小红') }, }, }

登录后复制

在父组件中,修改message的值,子组件内的props的value字段就会自动更改,在子组件内触发input事件,那么父组件中的message值也会被更改。

问题3:Vue 组件间通信有哪几种方式?

这道题也是面试非常常考的一道题,能答出的方式越多,说明对Vue掌握的越熟练。一般组件间的通信大致分为3种:父子组件通信、爷孙组件通信、兄弟组件通信,下面我们分别来看:

props / $emit 适合父子组件间通信

这也是Vue最基础的数据通信方式,如果这都不知道,那就没法往后聊了。

ref 与 $parent / $children 适合父子组件间通信

ref如果用在组件上,可以拿到组件的实例对象,进行操作数据$parent / $children:也可以访问父/子实例对象,进行数据操作

EventBus ($emit / $on)  适合父子、爷孙、兄弟组件通信

这种方法是通过场景一个空的Vue实例来作为事件中心,用它来触发事件和监听事件,从而实现任何组件间的通信。使用EventBus这种方式有很多弊端,不建议大家在项目中去使用,知道这种实现思路就可以。

$attrs/$listeners 适合爷孙组件通信

$attrs:包含父作用域中不作为组件props和自定义事件的属性绑定和事件,并且可以通过 v-bind=”$attrs” 传入内部组件。$listeners:包含父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件。注意:在 Vue 3 中已被移除。事件监听器现在是 $attrs 的一部分

provide / inject 适合爷孙组件通信

在爷爷组件上通过 provide 来提供变量,然后在孙子组件中通过 inject 来注入变量。

Vuex 适合 父子、爷孙、兄弟组件通信

Vuex是专门用来解决Vue应用程序中的状态管理问题。

(学习视频分享:vue、vue)

以上就是看看这3道必问面试题,检验你的Vue掌握程度!的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    聊聊vite+vue3.0+ts中如何封装axios?

    2025-4-1 16:56:51

    编程技术

    深入剖析vue2.x中diff算法的原理

    2025-4-1 16:56:55

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索