Vue面试题-答案、例子

本文详细介绍了Vue组件的生命周期阶段及其应用场景,包括beforeCreate、created等钩子的使用,以及组件间的父子、兄弟通信方法,v-if/v-show对比,自定义组件的Vue CLI应用,DOM操作技巧,以及src目录结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、Vue的生命周期

        每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

将要创建 ===>调用beforeCreate函数
创建完毕 ===>调用created函数
将要挂载 ===>调用beforeMount函数
挂载完毕 ===>调用mounted函数
将要更新 ===>调用beforeUpdate函数
更新完毕 ===>调用updated函数
将要销毁 ===>调用beforeDestory函数
销毁完毕 ===>调用destroyed函数


2、第一次页面加载会触发哪几个钩子?

        第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子


3、DOM 渲染在 哪个周期中就已经完成?

        DOM 渲染在 mounted 中就已经完成了。

4、简单描述每个周期具体适合哪些场景

        beforecreate : 可以在这加个loading事件,在加载实例时触发
        created : 初始化完成时的事件写在这⾥,如在这结束loading事件,异步请求也适宜在这⾥调⽤
        mounted : 挂载元素,获取到DOM节点
        updated : 如果对数据统⼀处理,在这⾥写上相应函数
        beforeDestroy : 可以做⼀个确认停⽌事件的确认框
        nextTick : 更新数据后⽴即操作dom


5、组件之间是怎么通信的

        组件之间通信主要分为三种:父子传参,子父传参,兄弟传参。

        父子传参:父组件通过自定义属性的方式传参,通过props属性给子组件传参,子组件通过props属性去接收参数。

        子:progress

        父页面引用:

        在父组件中定义

        在方法里赋值,然后以StepInfo参数,传递到组件中,进而铺数据到页面中


        子父传参:子组件通过自定义事件的方式传参,通过$emit去进行传参。

        父类页面:

        子:

        这样,在父页面handleSubmit这个方法中,e中就会得到组件中的result的值

         组件和组件通信

6、Vue.cli中怎样使用自定义的组件?

  1. 在 components 目录新建组件文件
  2. 在需要用到的页面import中导入
  3. 使用component注册
  4. 在 template 视图中使用组件标签

7、v-if 和 v-show 区别

  v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换,来控制元素的显示和隐藏。

根据应用场景选择

  • v-if 有更高的切换开销,如果在运行时条件很少改变,则使用 v-if 较好。
  • v-show 有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好。

注意

  • 不推荐同时使用 v-if 和 v-for
  • 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

8、说出至少 4 种 vue 指令和它的用法?

  • v-if:判断是否隐藏;
  • v-for:数据循环;
  • v-bind:class:绑定一个属性;(v-bind缩写为‘ : ’)
  • v-model:实现双向绑定;
  • v-show

9、为什么避免 v-if 和 v-for 一起用?

        当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,通过v-if 移动到容器元素,不会再重复遍历列表中的每个值。取而代之的是,只检查它一次,且不会在 v-if 为否的时候运算 v-for

10、如何获取dom

        this.$refs.myPicker.show()
        在我们的vue项⽬中,难免会因为引⽤第三⽅库⽽需要操作DOM标签,vue为我们提供了ref属性。 ref 被⽤来给元素或⼦组件注册引⽤信息。引⽤信息将会注册在⽗组件的 $refs 对象上。如果在普通的 DOM 元素上使⽤,引⽤指向的就是 DOM 元素;如果⽤在⼦组件上,引⽤就指向组件实例

 this.$refs.myPicker,里面还有组件的其他属性

 

11、请说出vue.cli项⽬中src⽬录每个⽂件夹和⽂件的⽤法?
       

        api存放页面调用的接口;assets⽂件夹是放静态资源;config:系统配置文件;components是放组件;router是定义路由相关的配置;utils:存放组件;view视图;app.vue是⼀个应⽤主组件;main.js是⼊⼝⽂件;.env.development 具体的dev环境的配置信息

 

12.Vue对class绑定的方式以及选择器


active是否作用于该div元素上 由isPlaying数据来决定,为true时作用,false时不作用。

13、display:none 、 visibility:hidden 和 opacity:0 之间的区别?

三者公共点都是隐藏。不同点:

  • 一、是否占据空间。
    display:none,隐藏之后不占位置;visibility:hidden、opacity:0,隐藏后任然占据位置。
  • 二、子元素是否继承。
    display:none --- 不会被子元素继承,父元素都不存在了,子元素也不会显示出来。
    visibility:hidden --- 会被子元素继承,通过设置子元素 visibility:visible 来显示子元素。
    opacity:0 --- 会被子元素继承,但是不能设置子元素 opacity:0 来先重新显示。
  • 三、事件绑定。
    display:none 的元素都已经不存在了,因此无法触发他绑定的事件。
    visibility:hidden 不会触发他上面绑定的事件。
    opacity:0 元素上面绑定的事件时可以触发的。

14、Vue中如何检测数组的变化?

数组的7个方法。 分别是:push、shift、pop、splice、unshift、sort、reverse

三者公共点都是隐藏。不同点:

  • 一、是否占据空间。
    display:none,隐藏之后不占位置;visibility:hidden、opacity:0,隐藏后任然占据位置。
  • 二、子元素是否继承。
    display:none --- 不会被子元素继承,父元素都不存在了,子元素也不会显示出来。
    visibility:hidden --- 会被子元素继承,通过设置子元素 visibility:visible 来显示子元素。
    opacity:0 --- 会被子元素继承,但是不能设置子元素 opacity:0 来先重新显示。
  • 三、事件绑定。
    display:none 的元素都已经不存在了,因此无法触发他绑定的事件。
    visibility:hidden 不会触发他上面绑定的事件。
    opacity:0 元素上面绑定的事件时可以触发的。

15、 

### Vue.js 面试题答案汇总 #### 1. Vue 双向数据绑定的原理是什么? Vue 的双向数据绑定主要是通过 `Object.defineProperty` 或者 Proxy 实现的。对于 Vue 2.x 版本,使用的是 `Object.defineProperty` 方法来劫持对象属性的变化并触发相应的更新逻辑[^1]。而在 Vue 3.x 中,则采用了 ES6 提供的 Proxy 和 Reflect API 来替代原有的定义方式,从而使得对复杂嵌套结构的数据变更检测更为高效和全面。 ```javascript // 使用 Object.defineProperty 示例 (Vue 2.x) let obj = {}; Object.defineProperty(obj, 'key', { get() { return value; }, set(newValue) { value = newValue; console.log(`Key has been changed to ${newValue}`); } }); ``` #### 2. MVVM 设计模式的核心思想是什么?适用于哪些场景? MVVM(Model-View-ViewModel)是一种软件架构设计模式,在传统的 MVC 基础上改进而来,其中 Controller 被 ViewModel 替代。其核心在于通过数据驱动视图变化而非直接操作 DOM,减少了大量手动 DOM 操作带来的性能开销和维护难度[^2]。这种模式非常适合那些涉及频繁数据交互的应用程序开发环境,比如动态表格、实时聊天界面等需要快速响应用户输入或者后台推送消息的情况。 #### 3. 如何在 Vue 应用中获取某个特定的 DOM 元素? 可以通过设置 `ref` 属性为该目标元素指定唯一标识符名称,之后利用此引用名访问到实际对应的 DOM 结构实例。当应用于普通 HTML 标签时,返回的就是原始 DOM 对象;如果是自定义组件的话,则得到的是相应组件实例本身[^3]。 ```html <template> <div> <button ref="myButton">Click Me</button> </div> </template> <script> export default { mounted(){ const btnElement = this.$refs.myButton; } }; </script> ``` #### 4. 列举几个常用的 Vue 指令及其作用。 以下是部分常见指令的功能描述: - **v-model**: 主要用于表单控件上的双工链接,同步模型值与UI表现之间的关系[^4]; - **v-bind**: 动态地将HTML特性关联至表达式的计算结果之上; - **v-on**: 添加事件监听器以便捕获用户的动作反馈信号; - **v-for**: 渲染列表项集合体作为重复区域呈现出来; - **v-if/v-else-if/v-else**: 控制条件分支下的内容可见性切换行为; - **v-show**: 类似于 v-if,但它始终渲染并且保持DOM存在只是改变 display css样式达到隐藏效果. #### 5. data 为什么是一个函数而不是简单的对象字面量形式? 因为在 Vue 组件化体系下,每一个独立运行的例子都需要拥有自己私有的状态副本以防互相干扰污染共享资源。因此将 data 定义成工厂方法的形式每次调用都会重新生成一个新的初始状态容器,确保各个组件间互不影响各自的状态管理边界清晰明了[^5]。 ```javascript data () { return { msg: '' }; }, ``` #### 6. 让 CSS 仅限于当前组件生效的方法有哪些? 一种常见的做法是在 `<style>` 标记内添加 scoped 属性,这样编写的样式规则只会应用于此单一组件范围内而不溢出影响全局或其他地方使用的相同类名的选择器匹配情况[^4]。 ```html <style scoped> .red{ color:red; } </style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值