2024年刚刚翻新前端vue面试题

1、vue中常用的指令及作用?

  1. v-text指令:用于更新标签包含的文本,它的作用跟双大括号效果是一样的
  2. v-html指令:绑定一些包含html代码的数据在视图上
  3. v-show指令:指令的取值为true/false,分别对应着显示/隐藏,改变的是元素css样式的display属性
  4. v-if指令:取值为true/false,控制元素是否需要被渲染
  5. v-else指令:和v-if指令搭配使用,没有对应的值。当v-if的值false,v-else才会被渲染出来。
  6. v-for指令:遍历data中存放的数组数据,实现列表的渲染。
  7. v-bind指令:用于动态绑定DOM元素的属性;例如 标签的href属性,标签的src属性等。v-bind可以简写成“:”
  8. v-on指令:可以绑定事件的监听器。通过v-on指令修饰click点击事件,指定事件响应后的处理函数为methods中定义的方法,v-on:简写为@
  9. v-model指令:用于表单输入,实现表单控件和数据的双向绑定。只要给input控件添加v-model指令,并指定关联的数据content,就可以轻松把用户输入的内容绑定在content上。
  10. v-once指令:只渲染一次,后面元素中的数据再更新变化,都不会重新渲染。

2、vue全家桶及react全家桶包含哪些?

vue全家桶:

vue(整体架构) +  vuex(状态管理) +  vue-router(路由) +  vue_resource || axios(ajax请求) +  mint-UI(移动端UI框架库) || antd-vue(PC端UI框架库)

react全家桶:

react(整体架构) +  redux || mobx(状态管理) +  react-router(路由) +  axios(ajax请求) +  antd || react-material || antd-model(UI框架库)

3、vue数据双向绑定的实现原理以及步骤分析

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

v-model的实现具体步骤共分为四步:

第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter

这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化

第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

4、Vue的生命周期钩子函数

vue生命周期共分为四个阶段

一:实例创建

二:DOM渲染

三:数据更新

四:销毁实例

共有八个基本钩子函数

1.beforeCreate --创建前

触发的行为:vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。

在此阶段可以做的事情:加loading事件

2.created --创建后

触发的行为:vue实例的数据对象data有了,$el还没有

在此阶段可以做的事情:解决loading,请求ajax数据为mounted渲染做准备

3.beforeMount --渲染前

触发的行为:vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换

在此阶段可以做的事情:。。。

4.mounted --渲染后

触发的行为:vue实例挂载完成,data.filter成功渲染

在此阶段可以做的事情:配合路由钩子使用

5.beforeUpdate --更新前

触发的行为:data更新时触发

在此阶段可以做的事情:。。。

6.updated —更新后

触发的行为:data更新时触发

在此阶段可以做的事情:数据更新时,做一些处理(此处也可以用watch进行观测)

7.beforeDestroy —销毁前

触发的行为:组件销毁时触发

在此阶段可以做的事情:可向用户询问是否销毁

8.destroyed —销毁后

触发的行为:组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在

在此阶段可以做的事情:组件销毁时进行提示

5、vue的v-if与v-show的区别?

相同点:

  1. v-if与v-show都可以动态控制dom元素显示隐藏

不同点:

  1. v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。

手段:

v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

编译过程:

v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;

编译条件:

v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

性能消耗:

v-if有更高的切换消耗;v-show有更高的初

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【自动化运营】PlugLink 1.0开源版发布

什么是PlugLink? PlugLink,顾名思义,就是插件的链接。它旨在帮助个人和小微企业实现运营自动化,通过链接脚本、API、AI大模型等,实现全自动工作流程。你可以把PlugLink看作一个巨大的拼装积木,每一个插件都…

3.每日LeetCode-数组类,爬楼梯(Go,Java,Python)

目录 题目 解法 Go Java Python 代码地址:leetcode: 每日leetcode刷题 题目 题号70. 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 示例 1: 输入&#xff…

【数据结构和算法】-动态规划爬楼梯

动态规划(Dynamic Programming,DP)是运筹学的一个分支,主要用于解决包含重叠子问题和最优子结构性质的问题。它的核心思想是将一个复杂的问题分解为若干个子问题,并保存子问题的解,以便在需要时直接利用&am…

【稳定检索】2024年核能科学与材料、物理应用国际会议(NESMPA 2024)

2024年核能科学与材料、物理应用国际会议 2024 International Conference on Nuclear Energy Science and Materials, Physical Applications 【1】会议简介 2024年核能科学与材料、物理应用国际会议即将拉开帷幕,这是一场汇聚全球核能科学、材料研究及物理应用领域…

软RAID部署

目录 资源列表 基础环境 关闭防火墙 关闭内核安全机制 一、安装mdadm工具 二、磁盘分区 三、创建RAID 本文记录了软RAID的部署流程,希望能够帮到大家。 资源列表 操作系统配置主机名IP备注CentOS7.3.16112C4Gnode1192.168.207.131需要添加2块磁盘 基础环境…

文件上传漏洞简介

目录 漏洞原理 漏洞危害 利用场景 检测方法 防御方法 绕过手段 前端JS绕过 构造可解析后缀 修改Content-Type(MIME) 大小写绕过 文件头绕过 图片马 截断与特殊文件名 其他绕过 尝试绕过的步骤 漏洞原理 原理 攻击者构造恶意文件进行上传…

Springboot 开发 -- Redis 集成及配置

一、引言 Redis 是一个开源的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中介。在现今的高并发、大数据量的互联网应用中,Redis 的作用愈发重要。Spring Boot 提供了对 Redis 的集成支持,使得开发者可以更加便捷地在…

低调收藏,这份MobaXterm使用指南很全面

中午好,我的网工朋友。 MobaXterm,这个名字对于我们这些经常需要在Windows环境下与Linux服务器打交道的人来说,应该并不陌生。它不仅仅是一个SSH客户端,更是一个功能强大的终端工具箱,集成了X服务器和Unix命令集&…

hivesql如何在数据量超大时避免join操作

hivesql如何在数据量超大时避免join操作 当在hive中对超大的表进行查询时,在这种情况下不能进行mapjoin,也选择不进行skewjoin或是smbjoin 。此时,针对特定的应用场景,可以设计特殊的sql避免join操作。下面给出一个典型案例&…

个人租用国外服务器的全指南

在全球化的数字时代,无论是出于业务扩展、学术研究还是个人娱乐等目的,个人用户对国外服务器的需求日益增长。选择租用国外服务器,尤其是来自科技发达地区如美国硅谷的服务器,能够享受到诸多优势。接下来,我们将详细探…

醒图及国际版 v9.9.9/v3.9.0 解锁会员(让照片栩栩如生的神奇应用)

介绍 醒图App是一款专业的照片编辑工具,旨在帮助用户高效地处理和优化照片,使其更加引人注目。这款应用程序配备了多样化的功能,包括图像增强、滤镜应用以及色彩调整等,以满足各种编辑需求。其设计了一个直观的用户界面&#xff…

全球首例光伏电场网络攻击事件曝光

快速增长的光伏发电正面临日益严重的网络安全威胁。近日,日媒报道了首个针对光伏电场的网络攻击事件。 首例公开确认的光伏电网攻击 日本媒体《产经新闻》近日报道,黑客劫持了一个大型光伏电网中的800台远程监控设备(由工控电子制造商Contec生产的Solar…

ABS三星!IF:6.0+新刊,中科院2区SSCI,1个月左右见刊!OA无需版面费,领域权威期刊!

【欧亚科睿学术】 01 期刊基本概况 【期刊类型】管理类SSCI 【出版社】TAYLOR & FRANCIS出版社 【期刊概况】IF:6.0-7.0,JCR2区,中科院2区 【版面类型】正刊,仅10篇版面 【预警情况】2020-2024年无预警记录 【收录年份…

Linux下压缩、删除、移动、拷贝操作(命令行)

Linux下压缩、删除、移动、拷贝操作(命令行) 一、写作动机 由于经常使用Linux系统,有一些常用的操作,记录一下。 二、命令 压缩文件 zip file.zip file.txt压缩文件夹 zip -r file.zip file删除文件 rm -f file.txt删除文件…

详解 HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。 EventSource 是单向通信的(是服务器向客户端的单向通信,客户端接收来自服务器的事件流)、基于 HTTP 协议(EventSource 是基于标准…

TalkingData数据统计

一、简介 TalkingData是一家提供移动应用数据统计和分析的公司,专注于移动应用数据的收集、分析和可视化。TalkingData通过收集应用程序的用户行为数据,如应用下载量、用户留存率、用户活跃度等,帮助开发者了解用户行为趋势、优化应用功能、…

word 全文中 英文字体 和 样式的字体 莫名奇妙地 被改成 “等线”

word全文中英文字体和样式的字体莫名奇妙地被改成“等线” sm word又抽风了,改完论文保存后打开突然发现全文字体都不对劲,吓得冷汗直冒:虽然我用git管理了论文版本,但是只有比较大的修改我才上传了,刚刚修了几个小时…

React-useState

useState基础使用 useState是一个React Hook(函数),它允许我们向组件添加一个状态变量,从而控制影响组件的渲染结果 本质:和普通JS变量不同的是,状态变量一旦发生变化组件的视图UI也会跟着变化&#xff0…

【哈希】闭散列的线性探测和开散列的哈希桶解决哈希冲突(C++两种方法模拟实现哈希表)(2)

🎉博主首页: 有趣的中国人 🎉专栏首页: C进阶 🎉其它专栏: C初阶 | Linux | 初阶数据结构 小伙伴们大家好,本片文章将会讲解 哈希函数与哈希 之 哈希桶解决哈希冲突 的相关内容。 如果看到最后…

2024年5月份架构师考试真题完整版

截至2024-5-28 19:24:14已全部收录完成 共75到选择题,5道案例题,4道论文题。题目顺序不分先后。 全网最全的2024年5月份架构师考试真题回忆版,包含答案和解析。 群友 疯狂程序员 花落无声 半夏 鲁迅-三战老兵(预备役) 本次必成 锦鲤附体 2024…