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

这篇具有很好参考价值的文章主要介绍了【Vue 面试题10道】我好像之前想过要写,不过之前JavaScript面试题比较多,就暂时略过了,这些应该几乎把常问的都包括了。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

本题针对 Vue2
这些几乎把常用的都包括了,问别的就没意思了,毕竟工作拧螺丝嘛
我都好久不用Vue了,不过用了React再回看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 将会被忽略。文章来源地址https://www.toymoban.com/news/detail-591985.html

到了这里,关于【Vue 面试题10道】我好像之前想过要写,不过之前JavaScript面试题比较多,就暂时略过了,这些应该几乎把常问的都包括了的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 软件测试工程师面试应对如何估算要写多少条测试用例,耗费多长时间?

    作为测试工程师,对测试用例的数量预估是一项基本能力,并且也很重要。因为在衡量和预报工作计划中十分重要,例如,设计用例需要几天,设计多少条、执行多长时间。 首先,预估测试用例数量最重要的依据就是需求。比如下面的这个软件设计界面和需求: 需求: 会员

    2024年02月04日
    浏览(53)
  • JavaScript判断当前时间是在某个时间点之前/之后

    比如我想判断当前时间是在14点之前,还是之后,就可以用以下代码 这里用到了一个格式化的函数 parseTime ,可以 把时间戳转为 yyyy-mm-dd 格式

    2024年02月16日
    浏览(45)
  • 【前端vue3面试题】2023最新面试实录vue3.0,高频10问(持续更新...)

    前端vue3面试题 2023最新面试实录vue3.0,高频10问(持续更新…) 1问: vue3和vue2有哪些不同? 响应式系统的重构,使用proxy替换Object.defineProperty属性,优势: Proxy可直接监听 对象 添加/删除 属性; Proxy直接监听 数组的变化 Proxy监听的目标是对象本身,不需要像Object.defineProperty那样遍

    2023年04月14日
    浏览(51)
  • vue代码安全,10项防范措施_vue中的安全,binder机制面试题

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新网络安全全套学习资料》

    2024年04月23日
    浏览(39)
  • 价值 1k 嵌入式面试题-单片机 main 函数之前都做了啥?

            请说下单片机(Arm)在运行到 main() 函数前,都做了哪些工作? 系统初始化工作,太泛泛 硬件初始化,比较不具体         这道题应该从两方面回答,一个是比较表面的硬件的初始化(价值 200),另一个比较深层次的 C 环境的初始化,这也是加分比较多的一点(价

    2024年02月14日
    浏览(42)
  • JavaScript中,一个字符串A在另外一个字符串B中重复出现,需要从B中去除A包括A之前和A之后的若干字符串

    !DOCTYPE html html head     meta charset=\\\"utf-8\\\"     title重复除去一个字符串前若干和后若干个字符/title /head body     h1我的网页/h1     p id=\\\"demo\\\"我的第一个段落。/p     script         function removeCharsAndTarget(str, target) {                      const regex = new RegExp(\\\'(.{0,2})?(\\\' + target + \\\')(.

    2024年02月08日
    浏览(56)
  • 糟了,数据库崩了,又好像没崩

    2023 年某一天周末,新手程序员小明因为领导安排的一个活来到公司加班,小明三下五除二,按照领导要求写了一个跑批的数据落库任务在测试环境执行 ,突然间公司停电了,小明大惊,“糟了,MySQL 还在跑任务,会不会因为突然断电,导致数据库崩了”。 这时候,傍边的同

    2024年02月05日
    浏览(36)
  • 折叠屏手机的全民时刻,好像就在等它……

    现在的智能手机市场,那真叫一个卷。  一直高高在上的苹果,接连降价,也难掩颓势,尤其中国市场,因为苹果的过于「乐观」,付出了五亿美金的惨痛代价,为了讨好消费者,苹果就连开个店, 库克 也得亲自来中国讨好消费者和资本市场, 各地奔波忙得脚底都快冒烟了

    2024年04月10日
    浏览(54)
  • 内网使用 python selenium报错,好像总是检查驱动的最新版本

    内网(办公室局域网)环境,使用 python selenium 时报错,好像总是检查驱动的最新版本,但是内网又不通外网,所以总是失败,怎样能禁止检查?试过chrome和Firefox都这样,驱动和浏览器都已经是对应的版本了。另外如果切换到外网环境,就能正常执行。 具体报错如下 Exception

    2024年02月08日
    浏览(43)
  • 为什么要写单测

    “在计算机编程中,单元测试又称为模块测试,是针对程序模块来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类、抽象类、或者派生类中的方法。

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包