Vue面试题实例分析
这篇“Vue面试题实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue面试题实例分析”文章吧。
创新互联-专业网站定制、快速模板网站建设、高性价比拱墅网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式拱墅网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖拱墅地区。费用合理售后完善,十年实体公司更值得信赖。
问题1: v-show 与 v-if 有什么区别?
此题属于考察面试者的Vue基础情况,一般只要用过Vue肯定会用到v-show 与 v-if。
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表单举例:
如果在自定义组件中:
{{value}}
在父组件中,修改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面试题实例分析
本文路径:http://myzitong.com/article/igessi.html