vue的十大面试题详情

这篇具有很好参考价值的文章主要介绍了vue的十大面试题详情。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 v-show与v-if区别 

v-if与v-show可以根据条件的结果,来决定是否显示指定内容:

  • v-if: 条件不满足时, 元素不会存在.

  • v-show: 条件不满足时, 元素不会显示(但仍然存在).

<div id="app">
	<button @click="show = !show">点我</button>
	<h1 v-if="show">Hello v-if.</h1>
    <h1 v-show="show">Hello v-show.</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data: {
        	show:true
        }
    });
</script>

 2 $nextTick   

定义:用于在下次 DOM 更新循环结束之后执行回调函数。它可以用来确保在更新 Vue 组件后,再执行一些操作或获取更新后的 DOM 元素。

作用:DOM更新完毕后执行回调函数

原理:promise.then->Mutation0bserver->setImmdiate(宏任务)- >setTimeout

  methods: {
    edit () {
      // 改数据->dom更新,需要时间->等待dom更新完毕 操作dom
      this.isShow = true
      console.log(this.$refs.txtRef)
      // setTimeout(() => {
      //   this.$refs.txtRef.focus()
      // }, 2000)
      // this.$nextTick
      // DOM更新完毕后执行回调函数
      // 原理 promise.then->MutationObserver->setImmdiate->setTimeout
      this.$nextTick(() => {
        this.$refs.txtRef.focus()
      })
    }

3 生命周期


vue2:

  beforecreat(创建前)、  created(创建后)、 beforemount(挂载前)、 mounted(挂载后)、beforeupdate(更新前)、updated(更新后)、beforedestroy(销毁前)、destroyed(销毁后)

vue3

vue的十大面试题详情,vue.js,javascript,前端

keep-live有两个生命周期

activated(){}当组件被激活的时候
deactivated(){当组件离开的时候

4 插槽

 1、默认插槽

//子组件
<slot>slot插槽</slot> //方法一

<slot name="default">slot插槽</slot> //方法二
//父组件
<exercise-first>slot插槽</exercise-first>

2、具名插槽

子组件<slot name="header"></slot>
//父组件  v-slot:main
<exercise-first>
      <template v-slot:header>
        <div>具名组件</div>
      </template>
</exercise-first>

3、作用域插槽

作用域插槽的语法: v-slot:slotName="parameter",其中 slotName 是插槽的名称,parameter 是接收子组件数据的参数。

父组件中定义的<template v-slot:slotname2="obj">
子组件中定义的<slot name="slotname2" :item1='item' value="111" ></slot>

案例:

<!-- 子组件 -->
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <div>
    <template v-slot:item="{ item }">
      <p>{{ item }}</p>
    </template>
  </div>
</template>

 5 vuex


vue2

1. State(状态):用于存储应用程序的状态数据,即存储在Vuex中的数据。
2. Getters(获取器):用于从状态中派生出新的数据,类似于Vue组件中的计算属性。
3. Mutations(变更):用于修改状态的方法,必须是同步的。每个mutation都有一个字符串类型的事件类型和一个回调函数,用于实际修改状态。
4. Actions(动作):类似于mutations,但可以包含异步操作。Actions用于触发mutations,可以包含任意异步操作,如API请求等。
5. Modules(模块):用于将Vuex的状态分割成模块,每个模块都有自己的state、getters、mutations和actions。

vue3

Pinia`的核心概念有:`state`,`getter`,`action`三个部分

vuex和pinia区别

1. Vuex`的核心概念有:`state`,`getters`,`mutations`,`actions`,`moudles`五个部分
2. `Pinia`的核心概念有:`state`,`getter`,`action`三个部分

1. `Vuex`对state的修改推荐使用`mutations`中的方法进行修改,
2. `Pinia`直接对state进行修改

1. Pinia中 getter,action 也可通过 `this` 访问整个 store 实例

 6 vue3与vue2区别  

vue2语法特点:

  1. 选项式api

  2. 缺点:数据和逻辑分离

  3. 维护不太好

vue3语法特点:与ts比较好

  1. 组合式api

  2. 代码量变少

  3. 分散式维护变成集中式维护

  4. 按需引入,体积更小

 7 keep-alive

动态组件 ---根据is属性值渲染对应组件

<keep-alive>

<component  :is="comName"></component>

</keep-alive>

8 路由模式

hash模式

   默认hash 哈希模式,地址上带#
 优点:兼容性好
 缺点:不美观
 原理 :#后面地址改变不会引起页面刷新,路由会检测到地址变化(window.onhashchange),拿到最新的地址找到
匹配的组件进行渲染
 mode: 'hash',

history模式 

history模式 地址上不带#
优点:美观 缺点:兼容不好
原理:采用h5的history相关api(pushState, replaceState)
必须服务器支持,配合后台
在脚手架环境下,默认支持history模式

9 常见指令修饰符

  1. .prevent:阻止默认事件行为。
  2. .stop:阻止事件冒泡。
  3. .capture:事件捕获模式,即在捕获阶段处理事件。
  4. .self:只在事件是从触发元素自身触发时触发回调。
  5. .once:只触发一次事件回调。
  6. .passive:指示浏览器不要阻止事件的默认行为。
  7. .native:监听组件根元素的原生事件。
  8. .sync:双向绑定,用于父子组件之间的数据传递

10 指令及其自定义指令


   指令:

v-text:把数据当作纯文本显示.
v-html:遇到html标签,解析标签

v-if:根据表达式的真假条件,对元素 
v-for:基于源数据多次渲染元素或模板块。
v-on:绑定事件监听器,用于监听 DOM 事件。
v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。简写:冒号。。。
v-model:在表单控件或组件上创建双向绑定。
v-show:根据表达式的真假值,切换元素的显示状态。
v-cloak:这个指令保持在元素上直到关联实例结束编译。
v-pre:跳过这个元素和所有子元素的编译过程。
v-once:只渲染元素和组件一次。

自定义指令

vue2

全局方式

// 全局注册一个自定义指令
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部方式

// 在组件中定义局部指令
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

vue3

全局方式

app.directive('color',{
    //直走一次
     mounted(el,binding){
    //     //el是指令所在的元素。binding指令的值
         el.style.backgroundColor=binding.value
     },
    // //更新就会走,会是响应式
     updated(el,binding){
         el.style.backgroundColor=binding.value
     }
})

局部方式文章来源地址https://www.toymoban.com/news/detail-831183.html

<template>
  <div>
    <input type="text" v-focus>
    <custorm-comp/>
  </div>
</template>

<script setup>
 const vFocus={
  mounted(el){
    el.focus()//聚焦
  }
 }
</script>

<style>

</style>

到了这里,关于vue的十大面试题详情的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端Vue自定义开屏启动广告组件,点击广告图跳转广告详情

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(85)
  • 前端面试问题-JavaScript

    1 闭包 闭包就是能够读取其他函数内部变量的函数 闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数,通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤链域 闭包的特性: 函数内再嵌套函数 内部函

    2024年02月15日
    浏览(46)
  • 前端面试题---->JavaScript

    原因: 当使用const声明一个对象或数组时,实际上是保证了对象或数组的引用不会被修改,但对象或数组本身的属性或元素是可以被修改的。这是因为const只能保证指向的内存地址不变,但并不保证内存地址指向的内容不变,而基本类型的变量在内存中存储的是值本身,而不

    2024年03月27日
    浏览(53)
  • 前端JavaScript面试100问(上)

    闭包:就是能够读取外层函数内部变量的函数。 闭包需要满足三个条件: 访问所在作用域; 函数嵌套; 在所在作用域外被调用 。 优点: 可以重复使用变量,并且不会造成变量污染 。 缺点: 会引起内存泄漏 使用闭包的注意点: 由于闭包会使得函数中的变量都被保存在内

    2024年02月15日
    浏览(52)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(60)
  • web前端Javascript—7道关于前端的面试题

    本文主要是web前端Javascript—的面试题,附上相关问题以及解决答案,希望对大家web前端Javascript闭包的学习有所帮助。 每个JavaScript 程序员都必须知道闭包是什么。在 JavaScript 面试中,你很可能会被问到的问题 以下是 7 个有关 JavaScript的面试题,比较有挑战性。不要查看答案

    2024年02月03日
    浏览(95)
  • 【自看】2023前端面试上岸手册——JavaScript

    JavaScript 共有八种数据类型,分别是 Undefined、Null、Boolean、 Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是ES6 中新增的数据类型: Symbol 代表创建后独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题。 BigInt 是一种数字类型的数据,它可

    2024年02月02日
    浏览(53)
  • 2023前端面试上岸手册——JavaScript部分

    JavaScript 共有八种数据类型,分别是 Undefined、Null、Boolean、 Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是ES6 中新增的数据类型: Symbol 代表创建后独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题。 BigInt 是一种数字类型的数据,它可

    2024年02月02日
    浏览(51)
  • 【直接收藏】前端JavaScript面试100问(上)

    闭包:就是能够读取外层函数内部变量的函数。 闭包需要满足三个条件: 访问所在作用域; 函数嵌套; 在所在作用域外被调用 。 优点:可以重复使用变量,并且不会造成变量污染 。 缺点:会引起内存泄漏 使用闭包的注意点: 由于闭包会使得函数中的变量都被保存在内存

    2024年02月08日
    浏览(40)
  • 【直接收藏】前端JavaScript面试100问(中)

    1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。 2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。 3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。 4、http的连接很简单,是无状

    2024年02月08日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包