这篇“Vue面试题实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue面试题实例分析”文章吧。
此题属于考察面试者的Vue基础情况，一般只要用过Vue肯定会用到v-show 与 v-if。
v-if 指令用于条件性地渲染一块内容，而v-show也用于条件性展示元素。
使用v-show的元素会被渲染并保留在 DOM 中，并使用CSS的display来控制元素的显示和隐藏。v-show 不支持 <template> 元素，也不支持 v-else。
使用v-if 是“真正”的条件渲染，元素的事件监听器和子组件都会被销毁和重建。v-if 也是惰性的，如果初始条件为false，则并不会渲染，直到变为true才会触发第一次渲染。而v-show不管条件是什么都会渲染，并根据display属性来控制显示隐藏。
一般来说，v-if的切换开销更大，而v-show只有初始渲染开销，如果元素需要频繁地切换，使用v-show，如果条件很少改变，则使用v-if更好。
v-model指令主要用来在<input>、<select>、<textarea>表单元素或者组件上来实现数据的双向绑定。他并没有多神奇，只是监听了用户的输入事件来对数据进行更新。
v-model会根据不同的元素来触发不同的事件：
text 和 textarea 元素使用input 事件；
checkbox / radio 和 select使用change 事件；
拿input表单举例：
<input v-model='something'> <!-- 等价于 --> <input v-bind:value="something" v-on:input="something = $event.target.value">
如果在自定义组件中：
<!-- 父组件： -->
<ModelChild v-model="message"></ModelChild>
<!-- 子组件： -->
<template>
<div>{{value}}</div>
</template>
<script>
export default {
props:{
value: String
},
methods: {
test1(){
this.$emit('input', '小红')
},
},
}
</script>在父组件中，修改message的值，子组件内的props的value字段就会自动更改，在子组件内触发input事件，那么父组件中的message值也会被更改。
这道题也是面试非常常考的一道题，能答出的方式越多，说明对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面试题实例分析”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
