记录一些前端vue面试

记录一些前端面试:

关于vue的题目

  1. 对于vm.nextTick的概念、场景用法、原理解释。
  2. 组件之间的传值方法有哪些?
  3. v-show 和 v-if 的区别?
  4. v-for 中的 key 属性的作用 和 如何避免重复?
  5. vue 的生命周期运行顺序什么? 常用的有哪几个?
  6. vue 的事件修饰符有哪些?(常用的)
  7. vue 的 watch 监听中 immediate 参数的作用?
  8. vue中 v-for 和 v-if 混用注意的地方

答案

1、对于vm.nextTick的概念、场景用法、原理解释。
概念:nextTick接收一个回调作为参数,它的作用是在下次DOM更新后执行回到函数。
(注:如果在没有提供回调函数且在支持Promise的环境中 会返回一个Promise)

原理:
“下次DOM更新时” 具体是指什么时候?
在vue中 当组件状态发生改变时,watcher 会得到通知,然后触发DOM渲染流程。但是这个过程是异步的。因为vue.20后使用虚拟DOM渲染,所有侦测到的变化只发送到组件,当一个组件有两个状态改变的话 是不可能让它渲染俩遍的,会把状态改变的通知缓存到一个列表中,最后在一次推送到渲染队列。(等所有状态改变完成,一次性组件的状态渲染到最新)。异步任务 分为俩种:微任务(队列)和宏任务(队列)。在事件循环中,当执行栈中的任务执行完毕后会先去检查微任务队列中是否有事件,有则执行(将队列中的事件都执行完),然后检查宏任务队列,在执行宏任务队列中的事件,再检查微任务队列。。。。循环下去就是事件循环。
那下次DOM更新时 是什么时候呢? 就是当执行栈中的任务执行完毕后第一次执行微任务的时候。而nextTick就是将 回调函数添加到微任务队列。只有在特殊时候才降级成宏任务,例如在微任务中更新DOM会延时到宏任务。
更新DPM的回调也是有vm.$nextTick来注册到微任务队列中的。所以一定要在更改数据后在使用nextTick钩子函数。
在一轮事件循环中 有多个 nextTick函数时 并不会反复的将回调添加到队列中,而是先将回调存在一个数组中 一次添加到队列中 并且在触发任务时 依次将回调执行。

2、组件之间的传值方法有哪些?
父子组件之间的传值:
父→子:props属性;
子→父:emit事件回传;
非父子组件:可以使用bus.js 和 vuex 。

3、v-show 和 v-if 的区别?
v-show:节点只是隐藏起来(display:none) 还是会在DOM树上渲染 方便切换。
v-if:不会在DOM树上面渲染 切换 对内存的开销稍微大一点。后面可以跟v-else。

4、v-for 中的 key 属性的作用 和 如何避免重复?
可以理解为 用它来标记 循环出来的虚拟DOM的标识符,在每次状态更新(被遍历数组的增删改)时,为了vue 更能准确的找出那些DOM被修改了 那些没有改变 从而做出正确的应对。应该用数据中的 id 或者其他不重复的数据来当key值。

5、vue 的生命周期运行顺序什么? 常用的有哪几个?
beforeCreate→created→beforeMount→mounted→beforeUpdate→updated→beforeDestroy→destroyed。
常用的有 created、mounted
6、vue 的事件修饰符有哪些?(常用的)
stop:阻止事件冒泡
capture:使用事件捕获模式
once:一次性触发事件
self:仅仅时DOM 自身触发事件 不能通过 冒泡 或者 事件捕获来触发。

7、vue 的 watch 监听中 immediate 参数的作用?
当immediate设置为true时,立即以表达式的方式触发回调,当在子组件中监听props传过来的父组件的值时 第一次改变的时候是不会触发监听回调的 设置这个值 可是立即调用一次。

8、vue中 v-for 和 v-if 混用注意的地方?
v-for的优先级比v-if高。例如:

  • MYSQL面试系列-04 king01299 面试mysql面试
    MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的?innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时,如何处理未刷入(flush)的重做日志信息(redolog)。它
  • Kafka 消息丢失如何处理? 架构文摘JGWZ 学习
    今天给大家分享一个在面试中经常遇到的问题:Kafka消息丢失该如何处理?这个问题啊,看似简单,其实里面藏着很多“套路”。来,咱们先讲一个面试的“真实”案例。面试官问:“Kafka消息丢失如何处理?”小明一听,反问:“你是怎么发现消息丢失了?”面试官顿时一愣,沉默了片刻后,可能有点不耐烦,说道:“这个你不用管,反正现在发现消息丢失了,你就说如何处理。”小明一头雾水:“问题是都不知道怎么丢的,处理起来
  • 每日算法&面试题,大厂特训二十八天——第二十天(树) 肥学 ⚡算法题⚡面试题每日精进java算法数据结构
    目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题,最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧!!特别介绍小白练手专栏,适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
  • MongoDB Oplog 窗口 喝醉酒的小白 MongoDB运维
    在MongoDB中,oplog(操作日志)是一个特殊的日志系统,用于记录对数据库的所有写操作。oplog允许副本集成员(通常是从节点)应用主节点上已经执行的操作,从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中,从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定:Oplog大小:oplog的大小是有限
  • ARM中断处理过程 落汤老狗 嵌入式linux
    一、前言本文主要以ARM体系结构下的中断处理为例,讲述整个中断处理过程中的硬件行为和软件动作。具体整个处理过程分成三个步骤来描述:1、第二章描述了中断处理的准备过程2、第三章描述了当发生中的时候,ARM硬件的行为3、第四章描述了ARM的中断进入过程4、第五章描述了ARM的中断退出过程本文涉及的代码来自3.14内核。另外,本文注意描述ARM指令集的内容,有些sourcecode为了简短一些,删除了T
  • 似乎,发生了很多事情 阿皮Ponder
    似乎,有很多事情正在发生。今天,我跟夫人陪着孩子走进来幼儿园,人生头一回以孩子家长的身份参加了小小的班级家长会。在幼儿园,遇见老同学。从2017年开始失联,因为对方遇到了一些事情,跟大家都失去了联系,今日再见面,分外激动,他拉着我一直聊,一直聊。感谢我们的孩子。孩子有点咳嗽,去医院做了检查。叔叔家的两个妹妹开始了高中生活,新的开始。过去看望,遇到一位老师,很是面熟。咨询之下,果然,曾经初中母校的老
  • 冬天短期的暴利小生意有哪些?那些小生意适合新手做? 一起高省
    短期生意不失为创业的一个商机,不过短期生意的商机是转瞬即逝的,而且这类生意也很难作为长期的生意去做,那冬天短期暴利小生意查看更多关于短期暴利小生意的文章有哪些呢?给大家先推荐一个2023年风口项目吧,真很不错的项目,全程零投资,当做副业来做真的很稳定,不管你什么阶层的人,或多或少都网购吧?你们知道网购是可以拿提成,拿返利,拿分佣的吗?你们知道很多优惠券群里面,天天群主和管理发一些商品吗?他们其实在
  • 如何成为段子手 欣雅阅读
    我是一个尬聊大师,与朋友聊天经常把话题聊死,留我一个人在群里,望着自己打下的最后一句话无语凝噎。看到风趣幽默的朋友与人聊天,很是艳羡,觉得自己何时才能成为这样的段子手呢?一、段子是什么?“段子”一词在百度百科上的解释:本是相声中的一个艺术术语,指的是相声作品中一节或一段艺术内容。我的理解:段子就是一些搞笑的故事或者笑话。二、为什么要会说段子?不知道大家有没有这样的朋友,本来很无趣的聚会,只要有他参
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库(4) 算法大师 华为od面试python
    华为OD面试真题精选专栏:华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例:文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片(Slicing)操作**基本切片语法
  • 【华为OD技术面试真题 - 技术面】-测试八股文真题题库(1) 算法大师 华为od面试python算法前端
    华为OD面试真题精选专栏:华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本,现在要你测试这个功能:打开聊天窗口,输入文本,限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些
  • 烟花美,但瞬间即逝的样子像极了爱情。 胡萝卜很甜
    我见过烟花在天上绽放时绚烂的模样也目睹过爱情消逝曾经相爱的两人变冷漠的样子其实我特别喜欢烟花绽放的艳丽大年初一凌晨的烟花手机拍的没有眼睛看到的美但是烟花虽美,稍纵即逝,眼睛刚记录下它的美好,就转眼消失不见。天空又恢复一片黑。烟花的样子像极了爱情啊……不论曾经多么山盟海誓,海枯石烂。只要吵架或者分手。就变得那么冷漠,那么陌生。你甚至开始怀疑你有过爱情么?真正的爱情到底是什么样子。来的快去的也快么?对
  • 01-Git初识 Meereen Gitgit
    01-Git初识概念:一个免费开源,分布式的代码版本控制系统,帮助开发团队维护代码作用:记录代码内容。切换代码版本,多人开发时高效合并代码内容如何学:个人本机使用:Git基础命令和概念多人共享使用:团队开发同一个项目的代码版本管理Git配置用户信息配置:用户名和邮箱,应用在每次提交代码版本时表明自己的身份命令:查看git版本号git-v配置用户名gitconfig--globaluser.name
  • 主题升华随机抽总结 木棉咕噜
    昨天晚上在火山灿教练那里抽了主题升华最后一关。一共抽了两个故事,现总结如下。第一个故事是《并不是你想象的那样》。主题一:有时候,面对别人一些貌似不合常情的行为,不要轻易的指责他,也许背后有我们所不知道的原因。在这一个主题里面,刚开始的时候,我没有加上貌似二字。所以就没有改动之后这么精准。主题二:有时候我们对他人善意的行为,可能会给我们带来一些意外的回报。主题三:面对同样一件事,因为不同的人看待问题
  • 对于写作者最重要的两点:热情和分享 鱼和熊掌兼得
    【热情】在开头,塔奇曼提到光有热情是不够的。但是,要想长期的坚持写作,没有热情是不行的。很多人都说,这是一个对写作者很优待的时代,也有很多人前仆后继的写作。在写作这条路上的人,始终很多,一些人来了,一些人走了,但是能坚持下来的却只有那么几个。不知道什么时候开始,写作变现这个词火了起来。不管是谁,都想来分一杯羹。可是写作变现真的没有这么容易,鱼哥说过,写作的人千千万万,能变现的也不过是其中的千分之一
  • 【华为OD技术面试真题精选 - 非技术题】 -HR面,综合面_华为od hr面 一个射手座的程序媛 程序员华为od面试职场和发展
    最后的话最近很多小伙伴找我要Linux学习资料,于是我翻箱倒柜,整理了一些优质资源,涵盖视频、电子书、PPT等共享给大家!资料预览给大家整理的视频资料:给大家整理的电子书资料:如果本文对你有帮助,欢迎点赞、收藏、转发给朋友,让我有持续创作的动力!网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。需要这份系统化的资料的朋友,可以点击这里获
  • HttpClient 4.3与4.3版本以下版本比较 spjich javahttpclient
    网上利用java发送http请求的代码很多,一搜一大把,有的利用的是java.net.*下的HttpURLConnection,有的用httpclient,而且发送的代码也分门别类。今天我们主要来说的是利用httpclient发送请求。 httpclient又可分为 httpclient3.x httpclient4.x到httpclient4.3以下 httpclient4.3
  • Essential Studio Enterprise Edition 2015 v1新功能体验 Axiba .net
    概述:Essential Studio已全线升级至2015 v1版本了!新版本为JavaScript和ASP.NET MVC添加了新的文件资源管理器控件,还有其他一些控件功能升级,精彩不容错过,让我们一起来看看吧! syncfusion公司是世界领先的Windows开发组件提供商,该公司正式对外发布Essential Studio Enterprise Edition 2015 v1版本。新版本
  • [宇宙与天文]微波背景辐射值与地球温度 comsci 背景
            宇宙这个庞大,无边无际的空间是否存在某种确定的,变化的温度呢?      如果宇宙微波背景辐射值是表示宇宙空间温度的参数之一,那么测量这些数值,并观测周围的恒星能量输出值,我们是否获得地球的长期气候变化的情况呢?   &nbs
  • lvs-server 男人50 server
    #!/bin/bash # # LVS script for VS/DR # #./etc/rc.d/init.d/functions # VIP=10.10.6.252 RIP1=10.10.6.101 RIP2=10.10.6.13 PORT=80 case $1 in start)   /sbin/ifconfig eth2:0 $VIP broadca
  • java的WebCollector爬虫框架 oloz 爬虫
    WebCollector主页: https://github.com/CrawlScript/WebCollector 下载:webcollector-版本号-bin.zip将解压后文件夹中的所有jar包添加到工程既可。 接下来看demo package org.spider.myspider; import cn.edu.hfut.dmic.webcollector.cra
  • jQuery append 与 after 的区别 小猪猪08
    1、after函数 定义和用法: after() 方法在被选元素后插入指定的内容。 语法: $(selector).after(content) 实例: <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></scr
  • mysql知识充电 香水浓 mysql
    索引 索引是在存储引擎中实现的,因此每种存储引擎的索引都不一定完全相同,并且每种存储引擎也不一定支持所有索引类型。 根据存储引擎定义每个表的最大索引数和最大索引长度。所有存储引擎支持每个表至少16个索引,总索引长度至少为256字节。 大多数存储引擎有更高的限制。MYSQL中索引的存储类型有两种:BTREE和HASH,具体和表的存储引擎相关; MYISAM和InnoDB存储引擎
  • 我的架构经验系列文章索引 agevs 架构
    下面是一些个人架构上的总结,本来想只在公司内部进行共享的,因此内容写的口语化一点,也没什么图示,所有内容没有查任何资料是脑子里面的东西吐出来的因此可能会不准确不全,希望抛砖引玉,大家互相讨论。 要注意,我这些文章是一个总体的架构经验不针对具体的语言和平台,因此也不一定是适用所有的语言和平台的。 (内容是前几天写的,现附上索引)   前端架构 http://www.
  • Android so lib库远程http下载和动态注册 aijuans andorid
    一、背景      在开发Android应用程序的实现,有时候需要引入第三方so lib库,但第三方so库比较大,例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过查阅资料和实验,发现通过远程下载so文件,然后再动态注册so文件时可行的。主要需要解决下载so文件存放位置以及文件读写权限问题。   二、主要
  • linux中svn配置出错 conf/svnserve.conf:12: Option expected 解决方法 baalwolf option
    在客户端访问subversion版本库时出现这个错误: svnserve.conf:12: Option expected 为什么会出现这个错误呢,就是因为subversion读取配置文件svnserve.conf时,无法识别有前置空格的配置文件,如### This file controls the configuration of the svnserve daemon, if you##
  • MongoDB的连接池和连接管理 BigCat2013 mongodb
    在关系型数据库中,我们总是需要关闭使用的数据库连接,不然大量的创建连接会导致资源的浪费甚至于数据库宕机。这篇文章主要想解释一下mongoDB的连接池以及连接管理机制,如果正对此有疑惑的朋友可以看一下。 通常我们习惯于new 一个connection并且通常在finally语句中调用connection的close()方法将其关闭。正巧,mongoDB中当我们new一个Mongo的时候,会发现它也
  • AngularJS使用Socket.IO bijian1013 JavaScriptAngularJSSocket.IO
            目前,web应用普遍被要求是实时web应用,即服务端的数据更新之后,应用能立即更新。以前使用的技术(例如polling)存在一些局限性,而且有时我们需要在客户端打开一个socket,然后进行通信。         Socket.IO(http://socket.io/)是一个非常优秀的库,它可以帮你实
  • [Maven学习笔记四]Maven依赖特性 bit1129 maven
    三个模块 为了说明问题,以用户登陆小web应用为例。通常一个web应用分为三个模块,模型和数据持久化层user-core, 业务逻辑层user-service以及web展现层user-web, user-service依赖于user-core user-web依赖于user-core和user-service   依赖作用范围  Maven的dependency定义
  • 【Akka一】Akka入门 bit1129 akka
    什么是Akka Message-Driven Runtime is the Foundation to Reactive Applications In Akka, your business logic is driven through message-based communication patterns that are independent of physical locatio
  • zabbix_api之perl语言写法 ronin47 zabbix_api之perl
    zabbix_api网上比较多的写法是python或curl。上次我用java--http://bossr.iteye.com/blog/2195679,这次用perl。for example: #!/usr/bin/perl use 5.010 ; use strict ; use warnings ; use JSON :: RPC :: Client ; use
  • 比优衣库跟牛掰的视频流出了,兄弟连Linux运维工程师课堂实录,更加刺激,更加实在! brotherlamp linux运维工程师linux运维工程师教程linux运维工程师视频linux运维工程师资料linux运维工程师自学
    比优衣库跟牛掰的视频流出了,兄弟连Linux运维工程师课堂实录,更加刺激,更加实在!   ----------------------------------------------------- 兄弟连Linux运维工程师课堂实录-计算机基础-1-课程体系介绍1 链接:http://pan.baidu.com/s/1i3GQtGL 密码:bl65   兄弟连Lin
  • bitmap求哈密顿距离-给定N(1<=N<=100000)个五维的点A(x1,x2,x3,x4,x5),求两个点X(x1,x2,x3,x4,x5)和Y( bylijinnan java
    import java.util.Random; /** * 题目: * 给定N(1<=N<=100000)个五维的点A(x1,x2,x3,x4,x5),求两个点X(x1,x2,x3,x4,x5)和Y(y1,y2,y3,y4,y5), * 使得他们的哈密顿距离(d=|x1-y1| + |x2-y2| + |x3-y3| + |x4-y4| + |x5-y5|)最大
  • map的三种遍历方法 chicony map
    package com.test; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; public class TestMap { public static v
  • Linux安装mysql的一些坑 chenchao051 linux
    1、mysql不建议在root用户下运行   2、出现服务启动不了,111错误,注意要用chown来赋予权限, 我在root用户下装的mysql,我就把usr/share/mysql/mysql.server复制到/etc/init.d/mysqld, (同时把my-huge.cnf复制/etc/my.cnf)  chown -R cc /etc/init.d/mysql
  • Sublime Text 3 配置 daizj 配置Sublime Text
    Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,// 设置字体和大小“font_face”: “Consolas”,“font_size”: 12,// 字体选项:no_bold不显示粗体字,no_italic不显示斜体字,no_antialias和
  • MySQL server has gone away 问题的解决方法 dcj3sjt126com SQL Server
    MySQL server has gone away 问题解决方法,需要的朋友可以参考下。 应用程序(比如PHP)长时间的执行批量的MYSQL语句。执行一个SQL,但SQL语句过大或者语句中含有BLOB或者longblob字段。比如,图片数据的处理。都容易引起MySQL server has gone away。 今天遇到类似的情景,MySQL只是冷冷的说:MySQL server h
  • javascript/dom:固定居中效果 dcj3sjt126com JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
  • 使用 Spring 2.5 注释驱动的 IoC 功能 e200702084 springbean配置管理IOCOffice
    使用 Spring 2.5 注释驱动的 IoC 功能 developerWorks 文档选项 将打印机的版面设置成横向打印模式 打印本页 将此页作为电子邮件发送 将此页作为电子邮件发送 级别: 初级 陈 雄华 ([email protected]), 技术总监, 宝宝淘网络科技有限公司 2008 年 2 月 28 日  &nb
  • MongoDB常用操作命令 geeksun mongodb
    1.   基本操作 db.AddUser(username,password)               添加用户 db.auth(usrename,password)      设置数据库连接验证 db.cloneDataBase(fromhost)    
  • php写守护进程(Daemon) hongtoushizi PHP
    转载自: http://blog.csdn.net/tengzhaorong/article/details/9764655   守护进程(Daemon)是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件。守护进程是一种很有用的进程。php也可以实现守护进程的功能。   1、基本概念   &nbs
  • spring整合mybatis,关于注入Dao对象出错问题 jonsvien DAOspringbeanmybatisprototype
    今天在公司测试功能时发现一问题: 先进行代码说明: 1,controller配置了Scope="prototype"(表明每一次请求都是原子型)    @resource/@autowired service对象都可以(两种注解都可以)。 2,service 配置了Scope="prototype"(表明每一次请求都是原子型)
  • 对象关系行为模式之标识映射 home198979 PHP架构企业应用对象关系标识映射
    HELLO!架构   一、概念 identity Map:通过在映射中保存每个已经加载的对象,确保每个对象只加载一次,当要访问对象的时候,通过映射来查找它们。其实在数据源架构模式之数据映射器代码中有提及到标识映射,Mapper类的getFromMap方法就是实现标识映射的实现。     二、为什么要使用标识映射? 在数据源架构模式之数据映射器中 //c
  • Linux下hosts文件详解 pda158 linux
     1、主机名:   无论在局域网还是INTERNET上,每台主机都有一个IP地址,是为了区分此台主机和彼台主机,也就是说IP地址就是主机的门牌号。   公网:IP地址不方便记忆,所以又有了域名。域名只是在公网(INtERNET)中存在,每个域名都对应一个IP地址,但一个IP地址可有对应多个域名。   局域网:每台机器都有一个主机名,用于主机与主机之间的便于区分,就可以为每台机器设置主机
  • nginx配置文件粗解 spjich javanginx
    #运行用户#user  nobody;#启动进程,通常设置成和cpu的数量相等worker_processes  2;#全局错误日志及PID文件#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  inf
  • 数学函数 w54653520 java
    public  class  S {        // 传入两个整数,进行比较,返回两个数中的最大值的方法。      public  int  get( int  num1, int  nu