【Vue 面试题10道】我好像之前想过要写,不过之前JavaScript面试题比较多,就暂时略过了,这些应该几乎把常问的都包括了

在这里插入图片描述

博主:_LJaXi Or 東方幻想郷
专栏: 前端面试题
开发工具:Vs Code

本题针对 Vue2
这些几乎把常用的都包括了,问别的就没意思了,毕竟工作拧螺丝嘛
我都好久不用Vue了,不过用了React再回看Vue感觉好简单啊…
其实工作上都很快能捡起来,就是面试问题可能是必须的,接着往下看吧

Vue2 前端面试题

  • 0. 自我介绍
  • 1. Vue中父子传值操作
    • 父传子
    • 子传父
  • 2. 回顾那些Vue生命周期钩子函数
    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeUnmount (2.x版本中为beforeDestroy)
    • unmounted (2.x版本中为destroyed)
  • 3. Vue中的computed和watch之间的区别
  • 4. Vue的路由有几种模式,介绍作用
  • 5. 路由传参 params 和 query 的区别
  • 6. Vue 路由的 $route 和 $router 各自有什么作用 / 区别
  • 7. Vue的自定义指令
  • 8. Vue 中 Vuex 的作用 / 里面分别有什么是做什么的
  • 9. Vue 中 Mixins 的作用 / 怎么使用
  • 10. 讲解一下 MVVM
  • 11. 何时使用keep-alive?为什么,有什么作用?
  • 12. v-show 与 v-if 的区别
  • 13. 为何v-for要用key???
  • 14. 请列举出Vue中一些指令,以及相对应的用法
  • 15. Vue 中的 修饰符 有哪些???

0. 自我介绍

面试官您好,我叫 ***,今年 ** 岁
目前在前端领域上有一定的工作经验,之前在 ** 公司 以及 ** 公司就职web前端 / 后端工程师
主要负责的项目有 *** 项目,*** 项目
主要负责了**模块开发
我的兴趣爱好是写博客,喜欢把自己工作遇到的问题或一些知识记录在博客中充实自己 | (根据自己的实际情况介绍爱好)闲暇之余也会 *******
今天来到贵公司面试深感荣幸,希望今后能与大家一起共事,自我介绍完毕,谢谢!

1. Vue中父子传值操作

父传子子传父
我们项目中常用到这两个功能,注意,父传子 传递数据为单向数据流传输,由 props 接收
子传父 即是使用自定义事件实现的数据回调,这两个数据流是不同的

父传子

App.vue 父组件

<template>
  <div id="app">
    <HelloWorld msg="我是父组件传过来的值,用props接收~"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  
  components: {
    HelloWorld
  }
}
</script>

HelloWorld.vue 子组件

<template>
  <div class="hello">
      {{ msg }}: props: { msg: String }
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  
  props: {
    msg: String
  }
}
</script>

父传子: 我们在父组件中引入子组件,然后通过子组件标签定义一个用于子组件可接收的变量 msg = “我们要传递的值
然后再子组件中使用 props 接收父组件中传递过来的变量,这就是父传子,可传递任意参数

子传父

HelloWorld.vue 子组件

<template>
  <div class="hello">
    <button @click="sonGiveFatherValue">传递数据给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  methods: {
    sonGiveFatherValue() {
      const data = '我是传递给父组件的一个字符串'
      this.$emit('shuju', data)
    }
  }
}
</script>

App.vue 父组件

<template>
  <div id="app">
    <HelloWorld @shuju="childData"/> 
    <div>接收子组件的数据: {{fatherOfChildValue}}</div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data() {
    return {
      fatherOfChildValue: ''
    }
  },
  components: {
    HelloWorld
  },

  methods: {
    childData(val) {
      this.fatherOfChildValue = val;
    }
  }
}
</script>

子传父: 是不是顺序颠倒了,子传父,便于理解,先看子组件
举个例子,比如我们需要在父组件中添加一个按钮,但是点开按钮就是一个弹窗,这时候我们就可以把这个弹窗封装为一个子组件,正是因为封装,所以才会有的数据传输hhhh…
题外话:Vue可是很好用的,至少比React的单向数据流好…


不闲扯,聊回正题,首先看 HelloWorld组件 我们需要把一个值,由子组件使用事件传递给父组件,注意点击事件下的 this.$emit(传递的事件名,传递的值)
然后我们在父组件中的子组件标签中 使用它 @shuju="childData" 这就是绑定一个自定义事件,然后事件参数就是你传递过来的那个值

主要看这两行你就能理解

<HelloWorld @shuju="childData"/> 

<script>
childData(val) {
  this.fatherOfChildValue = val;
}
</script>

2. 回顾那些Vue生命周期钩子函数

像我这种过目即忘但是会写的人,回顾面试题确实是有些痛苦的…

beforeCreate

在实例初始化之前调用,此时组件的选项还未初始化

created

在实例创建完成后调用,此时已经完成数据观测、属性和方法的运算,但尚未生成真实的 DOM 并完成挂载

beforeMount

在组件挂载之前调用,此时已经生成了真实的 DOM,但尚未挂载到页面中

mounted

在组件挂载完成后调用,此时组件已经被渲染到页面中

beforeUpdate

在数据变化导致重新渲染之前调用,此时页面尚未重新渲染

updated

在数据变化导致重新渲染之后调用,此时页面已经重新渲染完成

beforeUnmount (2.x版本中为beforeDestroy)

在组件实例销毁之前调用,此时组件尚未被销毁

unmounted (2.x版本中为destroyed)

在组件实例销毁后调用,此时组件已经被销毁

3. Vue中的computed和watch之间的区别

computed是计算属性,是基于已有的属性计算得出的新属性,只要依赖的属性不发生变化,计算结果也不会变化。watch是观察者,用来监听数据的变化,当数据发生变化时,执行相应的操作

computed 示例

<template>
  <div>
    <h2>计算属性示例</h2>
    
    <input v-model="firstNumber" type="number" placeholder="输入第一个数">
    <input v-model="secondNumber" type="number" placeholder="输入第二个数">

    <p>两数之和: {{ sum }}</p>
    <p>两数之差: {{ difference }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstNumber: 0,
      secondNumber: 0
    };
  },
  computed: {
    sum() {
      return parseInt(this.firstNumber) + parseInt(this.secondNumber);
    },
    difference() {
      return parseInt(this.firstNumber) - parseInt(this.secondNumber);
    }
  }
};
</script>

watch 示例

<template>
  <div>
    <h2>监听数据示例</h2>
    
    <input v-model="message" type="text" placeholder="输入消息">

    <p>消息长度: {{ messageLength }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messageLength: 0
    };
  },
  watch: {
    message(newMessage) {
      // newMessage 为新的消息值
      this.messageLength = newMessage.length;
    }
  }
};
</script>

4. Vue的路由有几种模式,介绍作用

Vue的路由有2种模式:hash模式、history模式

hash

在hash模式下,URL中的路径会以#符号开始,这种模式在旧版浏览器中很常见。它通过监听URL中hash值的变化来实现路由切换

// 在路由配置中使用hash模式
const router = new VueRouter({
  mode: 'hash',
  routes: [
    // 路由配置
  ]
})

history

history模式:
在history模式下,URL中的路径不包含#符号,看起来更加直观和美观。它使用HTML5的history API来实现路由切换

// 在路由配置中使用history模式
const router = new VueRouter({
  mode: 'history',
  routes: [
    // 路由配置
  ]
})

5. 路由传参 params 和 query 的区别

params 参数是用于传递动态路由参数的,即在路由路径中定义的参数,如 /user/:id 中的 id
使用 params 传递参数时,参数会被编码到URL中,例如:/user/1


query 参数则是用于传递查询参数的,它会被附加在URL的末尾以查询字符串的形式,如/user? id=1
使用 query 传递参数时,参数会以键值对的形式拼接在URL后面。
params参数可以在路由组件中通过 r o u t e . p a r a m s 来获取,而 q u e r y 参数可以通过 route.params来获取,而query参数可以通过 route.params来获取,而query参数可以通过route.query来获取

编程式 params

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    name: 'home', //注意使用 params 时一定不能使用 path
    params: { username: this.username },
  })
}

声明式

<router-link :to="{ name: 'home', params: { username: username } }">

编程式 query

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    path: '/home',
    query: { username: this.username },
  })
}

声明式

<router-link :to="{ path: '/home', query: { username: username } }">

6. Vue 路由的 $route 和 $router 各自有什么作用 / 区别

router 用来访问 Vue 中的路由实例,可以进行路由跳转和路由信息的获取。
route用来访问当前路由的信息,包括路由路径、参数、查询等。

7. Vue的自定义指令

Vue 自定义指令 ✨ 博主: pingting_

8. Vue 中 Vuex 的作用 / 里面分别有什么是做什么的

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

调试工具:vue devtools (Vue开发工具)

Vuex就像眼镜:您自会知道什么时候需要它。

详看我的这篇博客: Vuex 状态管理 ✨

9. Vue 中 Mixins 的作用 / 怎么使用

当使用Vue框架时,mixins提供了一种机制,可以在多个组件之间共享可重用的逻辑
通过使用mixins,可以将特定的属性、方法、计算属性、钩子函数等混合到多个组件中,从而实现代码的复用和组件的扩展。

src 目录下创建一个 mixins 文件夹,文件夹下新建自己要定义的混入对象 js 文件。使用对象的形式来定义混入对象,在对象中可定义与vue组件一样的 data、components、created、methods 、computed、watch 等属性,并通过 export 导出该对象.

export const  pageMixin = {
    data() {
        return {
            page: { // 分页信息
                pageNo: 1, // 当前页
                limit: 10, // 每页行数
                total: 0, // 列表总数量
            },        
            tableList: [], // 列表数据
            loading: false, // 加载列表数据的Loading
            PAGE_SIZES: [5, 10, 20, 30, 50, 100], // 每页行数列表,用于切换每页行数
            LAYOUT: "total, sizes, prev, pager, next, jumper" // Element表格组件中使用的功能
        }
    },
    methods: {
        // 查询列表数据
        queryList() {},
        // 修改当前页
        handleCurrentChange(pageNo) {
            this.page.pageNo = pageNo;         
            this.queryList();
        },
        // 修改每页行数
        handleSizeChange(limit) {
            this.page.pageNo = 1;
            this.page.limit = limit;
            this.queryList();
        },
    },
}

mixin的使用
在需要调用的组件页面中引入 pageMixin.js 文件

import {pageMixin} from "@/mixins/pageMixin"
export default {
    mixins: [ pageMixin ],
    data() {
      return {    	
      }
    }        
}

10. 讲解一下 MVVM

Modal(模型) - View(视图) - ViewModal(视图模型)
视图模型层 分离,并引入中间层 视图模型
在MVVM模式中,视图通过数据绑定方式与视图模型进行通信。这意味着当视图模型中的数据发生变化时,视图会自动进行更新
好处: 实现代码的可维护性、灵活性和可重用性,尤其在构建大型、复杂的用户界面时非常有用

11. 何时使用keep-alive?为什么,有什么作用?

在前端开发中,Vue.js提供了一个特殊的组件 <keep-alive>,用于在组件树中缓存组件的实例,以便在切换组件时保留其状态。我们可以使用 <keep-alive> 来优化性能,减少不必要的组件销毁和重建操作

12. v-show 与 v-if 的区别

v-show 通过 css display 控制显示和隐藏,v-if 组件真正的渲染和销毁,而不是显示和隐藏,频繁切换状态使用 v-show 否则 v-if

13. 为何v-for要用key???

快速查找到节点,减少渲染次数,提升渲染性能

14. 请列举出Vue中一些指令,以及相对应的用法

v-html   //html

v-text   //元素里要显示的内容

v-bind:data    //绑定动态数据   :data

v-on:click      //绑定事件      @click

v-for

v-if //条件渲染指令

v-model    //双向绑定,用于表单

15. Vue 中的 修饰符 有哪些???

以下为常用的 Vue 修饰符

.prevent
阻止默认行为,即调用事件的 event.preventDefault() 方法。常用于阻止表单提交或链接跳转等默认行为。

.stop
停止事件冒泡,即调用事件的 event.stopPropagation() 方法。当一个元素上触发了某个事件时,该事件会向上冒泡,影响到父元素中相同类型的事件。使用 .stop 修饰符可以阻止事件继续向上冒泡。

.capture
使用事件捕获模式,即在捕获阶段触发事件,而不是在冒泡阶段。默认情况下,事件是在冒泡阶段触发的。

.self
只有当事件是由当前元素本身触发时才会触发事件处理程序。当事件在当前元素之外的子元素中触发时,事件处理程序不会被调用。

.once
只触发一次事件处理程序,即事件处理程序只会执行一次,之后就会被移除。

.passive
指示监听器永远不会调用 event.preventDefault()。这个修饰符用于提高页面滚动的性能。但要注意,一旦对同一个事件同时使用了 .passive 和 .prevent 修饰符,.prevent 将会被忽略。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/42627.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Dubbogo 详解

Dubbogo 详解 简介 dubbo功能很强大的微服务开发框架&#xff0c;支持多种通信协议&#xff0c;并具有流量治理的功能。 dubbo在有了大转变&#xff0c;拥抱了云原生&#xff0c;从哪些方面可以体现呢&#xff1f; 推出了自己的Trip协议修复了服务发现的级别&#xff0c;之…

20230723红米Redmi Note8Pro掉在水里的处理步骤

20230723红米Redmi Note8Pro掉在水里的处理步骤 2023/7/23 18:18 百度搜搜&#xff1a;小米手机进水 破音怎么处理 Redmi Note8Pro 6400万全场景四摄 液冷游戏芯 4500mAh长续航 NFC 18W快充 红外遥控 https://www.zhiliancy.com/a/q5podmr12.html 首页 / 热文 / 内容 小米喇叭…

【从删库到跑路】MySQL数据库的索引(一)——索引的结构(BTree B+Tree Hash),语法等

&#x1f38a;专栏【MySQL】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出小吉的问题 文章目录 &#x1f354;概述&#x1f354;索引结构⭐B-Tree多路平衡查找树&#x1f3f3;️‍&a…

前端技术Vue学习笔记--001

前端技术Vue学习笔记 文章目录 前端技术Vue学习笔记1、Vue2和Vue3比较2、Vue简介3、Vue快速上手4、插值表达式{{}}5、Vue响应式特性6、Vue指令6.1、v-html指令6.2、v-show指令和v-if指令6.3、v-else指令和v-else-if指令6.4、v-on指令6.4.1、v-on指令基础6.4.2、v-on调用传参 6.…

win10电脑便签常驻桌面怎么设置?

你是否曾经因为繁忙的工作而忘记了一些重要的事项&#xff1f;相信很多人都会回答&#xff1a;忘记过&#xff01;其实在快节奏的职场中&#xff0c;我们经常需要记录一些重要的信息&#xff0c;例如会议时间、约见客户时间、今天需要完成的工作任务等。而为了能够方便地记录和…

阿里云安装宝塔面板

阿里云安装宝塔面板 1.安装步骤2.需要加入安全组&#xff0c;打开端口3.安装宝塔 1.安装步骤 1.这里主要以阿里云的服务器 ECS为例子,需要安装纯净的系统 创建过程: 这边先用的是免费的: 2.需要加入安全组&#xff0c;打开端口 进入实例选项卡&#xff1a; 快速添加&…

低代码平台协同OA升级,促进金融企业信息化建设

编者按&#xff1a;数字化办公是信息化时代每个企业不可避免的&#xff0c;OA系统是数字化办公的关键环节。如何与时俱进&#xff0c;保持企业的活力&#xff0c;增强企业综合竞争力&#xff1f;本文分析了企业OA系统为什么需要升级&#xff0c;并进一步指出如何实现升级。 关…

Linux环境下Elasticsearch相关软件安装

Linux环境下Elasticsearch相关软件安装 本文将介绍在linux(Centos7)环境下安装Elasticsearch相关的软件。 1、安装Elasticsearch 1.1 Elasticsearch下载 首先去Elasticsearch官网下载相应版本的安装包&#xff0c;下载之后传输到linux服务器上。 官网地址&#xff1a;http…

在自定义数据集上微调Alpaca和LLaMA

本文将介绍使用LoRa在本地机器上微调Alpaca和LLaMA&#xff0c;我们将介绍在特定数据集上对Alpaca LoRa进行微调的整个过程&#xff0c;本文将涵盖数据处理、模型训练和使用流行的自然语言处理库(如Transformers和hugs Face)进行评估。此外还将介绍如何使用grado应用程序部署和…

STM32MP157驱动开发——LED驱动(设备树)

文章目录 设备树驱动模型如何使用设备树写驱动程序设备树节点要与 platform_driver 能匹配设备树节点指定资源&#xff0c;platform_driver 获得资源 LED 模板驱动程序的改造&#xff1a;设备树驱动模型修改设备树&#xff0c;添加 led 设备节点修改 platform_driver 的源码编译…

设计模式再探——状态模式

目录 一、背景介绍二、思路&方案三、过程1.状态模式简介2.状态模式的类图3.状态模式代码4.状态模式还可以优化的地方5.状态模式的项目实战&#xff0c;优化后 四、总结五、升华 一、背景介绍 最近产品中有这样的业务需求&#xff0c;不同时间(这里不是活动的执行时间&…

前端学习——Vue (Day1)

Vue 快速上手 Vue 是什么 创建 Vue 实例 Vue2官网&#xff1a;https://v2.cn.vuejs.org/ <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge…

基于单片机的语音识别智能垃圾桶垃圾分类的设计与实现

功能介绍 以51单片机作为主控系统&#xff1b;液晶显示当前信息和状态&#xff1b;通过语音识别模块对当前垃圾种类进行语音识别&#xff1b; 通过蜂鸣器进行声光报警提醒垃圾桶已满&#xff1b;采用舵机控制垃圾桶打开关闭&#xff1b;超声波检测当前垃圾桶满溢程度&#xff1…

【目标跟踪】2、FairMOT | 平衡多目标跟踪中的目标检测和 Re-ID 任务 | IJCV2021

文章目录 一、背景二、方法2.1 Backbone2.2 检测分支2.3 Re-ID 分支2.4 训练 FairMOT2.5 Online Inference 三、效果3.1 数据集3.2 实现细节3.3 消融实验3.4 最终效果 论文&#xff1a;FairMOT: On the Fairness of Detection and Re-Identification in Multiple Object Tracki…

大模型开发(十):Chat Completion Models API 详解

全文共8000余字&#xff0c;预计阅读时间约18~28分钟 | 满满干货(附代码案例)&#xff0c;建议收藏&#xff01; 本文目标&#xff1a;详解Chat Completion Models的参数及应用实例&#xff0c;并基于该API实现一个本地知识库的多轮对话智能助理 代码&文件下载点这里 一、…

【前端|CSS系列第4篇】CSS布局之网格布局

前言 最近在做的一个项目前台首页有一个展示词条的功能&#xff0c;每一个词条都以一个固定大小的词条卡片进行展示&#xff0c;要将所有的词条卡片展示出来&#xff0c;大概是下面这种布局 每一行的卡片数目会随着屏幕大小自动变化&#xff0c;并且希望整个卡片区域周围不要…

ChatGPT 4.0 —— Code Interpreter

&#x1f4ce;产品销售数据集.csv 选取以上的数据集作为输入&#xff0c;对Code Interpreter 进行测试 1.输入指定数据集&#xff0c;要求给出该数据集的概貌 2.请分析销售的总金额和其他变量的关系 Python Script: # Import required libraries import matplotlib.pyplot a…

java项目之网络视频播放器(ssm+mysql+jsp)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的网络视频播放器。技术交流和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&a…

vs2015 工程组织与动态加载

10.Visual Studio动态加载_哔哩哔哩_bilibili 1.工程组织 ① researcher.cpp #include "nn/nn.h"#include "nn/factory.h" #include "nn/factory_impl/factory_impl.h"#include <iostream>int main() {int ret 0;factory_i* fct new f…

Java实现获取客户端真实IP方法小结

Java实现获取客户端真实IP方法小结 在jsP里&#xff0c;获取客户端的IP地址的方法是&#xff1a;request.getRemoteAddr()&#xff0c;这种方法在大部分情况下都是有效的。但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实IP地址了。如果使用了反向代理软件&am…