web前端面试题----->VUE

news/2024/4/27 20:02:03/文章来源:https://blog.csdn.net/qq_52526079/article/details/137073714

Vue的数据双向绑定是通过Vue的响应式系统实现的。具体原理:

1. Vue会在初始化时对数据对象进行遍历,使用Object.defineProperty方法将每个属性转化为getter、setter。这样在访问或修改数据时,Vue能够监听到数据的变化。

2. 当数据发生变化时,Vue会通知所有依赖该数据的地方进行更新。这是通过收集依赖和触发更新的过程实现的。

3. 在模板中,通过使用Vue提供的指令(如v-model)或插值表达式({{}})将数据绑定到DOM元素上。

4. 当用户输入或操作DOM元素时,触发相应的事件(如input事件),Vue会根据事件类型和绑定的指令,更新数据对象中的对应属性的值。

5. 数据对象的值发生变化后,Vue会自动更新绑定了该数据的DOM元素,实现视图的更新。

总结来说,Vue的数据双向绑定是通过使用Object.defineProperty方法将数据对象转化为响应式的getter、setter,并通过收集依赖和触发更新的机制,实现数据的变化能够自动更新到视图中,同时用户的操作也能够更新数据对象的值。这样就实现了数据和视图之间的双向绑定。

vue的指令有哪些

  1. v-if:根据表达式的值来条件性地渲染元素。
  2. v-for:基于数组的数据进行循环渲染元素。
  3. v-on:绑定事件监听器,用于监听DOM事件。
  4. v-bind:动态地绑定一个或多个属性。
  5. v-model:在表单元素上创建双向数据绑定。
  6. v-show:根据表达式的值来显示或隐藏元素。

模版字符串:`${}`

注:v-model,只能用在表单类元素(输入类元素含有value的)

v-if和v-show不能混用的原因

渲染顺序问题:v-if和v-for在渲染顺序上存在冲突。Vue.js的渲染顺序规定,v-for的优先级高于v-if。也就是说,在每次循环迭代时,v-if的条件判断都会执行一次。这可能会导致一些意外的结果,特别是在有大量数据和复杂条件逻辑的情况下。

可读性和维护性:同时使用v-if和v-for可能会增加代码的复杂性,

数据改变了但有时候没有渲染在页面的原因:

异步更新问题:在某些情况下,数据的变化可能是在异步操作中发生的,而Vue的更新是同步进行的。这意味着在异步操作结束之前,页面上的内容不会被更新。可以使用Vue提供的nextTick方法来在下一次DOM更新循环结束后执行回调函数,确保页面上的内容已经更新。

Vuex

Vuex是一个用于Vue.js应用程序的状态管理模式和库。它可以帮助我们在应用程序中管理和共享状态,使得不同组件之间的数据共享和通信更加方便和可维护。

Vuex的核心概念包括:

1. State(状态):存储应用程序的状态数据,类似于组件中的data属性。

2. Getters(获取器):用于从状态中派生出新的数据,类似于组件中的计算属性。

3. Mutations(变更):用于修改状态的方法,必须是同步的,类似于组件中的方法。

4. Actions(动作):用于处理异步操作或复杂的业务逻辑,可以包含多个变更操作,类似于组件中的方法。

5. Modules(模块):将应用程序的状态拆分为多个模块,每个模块可以有自己的状态、获取器、变更和动作。

通过使用Vuex,我们可以将应用程序的状态集中管理,使得状态的变化更加可追踪和可控,同时也方便了不同组件之间的数据共享和通信。

Vuex适合存储以下类型的数据:

1. 全局状态:适合存储应用程序的全局状态,例如用户登录状态、用户信息、主题设置等。

2. 共享数据:适合存储多个组件之间需要共享的数据,例如购物车中的商品列表、筛选条件、通知消息等。

3. 异步请求结果:适合存储异步请求的结果,例如从服务器获取的数据、API返回的状态等。

4. 缓存数据:适合存储需要在多个组件之间共享的缓存数据,以避免重复请求或计算。

5. 表单数据:适合存储表单中的输入数据,以便在不同组件之间共享和管理。

需要注意的是,Vuex并不适合存储大量的非共享数据或者临时状态,因为它会导致状态过于庞大,不易维护和追踪。对于组件内部的局部状态,可以直接在组件中使用data属性来管理。在使用Vuex时,需要根据具体的场景和需求来决定哪些数据应该存储在Vuex中。

单页 Web 应用 (single-page application 简称为 SPA)

简单理解为:仅仅在web页面初始化时加载相应的HTML、JavaScript、CSS,一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换HTML的内容(采用的是div切换显示和隐藏),从而实现UI与用户的交互。

1. 无刷新界面,给用户体验原生的应用感觉

2、 节省原生(android 和 ios)app 开发成本

3、 提高发布效率,无需每次安装更新包

缺点:效果和性能确实和原生的有较大差距

2、各个浏览器的版本兼容性不一样

3、业务随着代码量增加而增加,不利于首屏优化

通信方式

一.全局事件总线、vux:适用于所有组件通信

1.安装全局事件总线:在main.js文件中在beforeCreate里面将this(此时的this指向vm)赋值给绑定在vue的原型对象上的$bus

2.数据发送者:用this.$bus.$emit(this.name)来发送要共享的数据

3.数据接收者:用this.$bus.$on(

(data)=>{console.log(data)})接受数据

二.自定义事件:适用于父子组件通信

在父组件写一个函数,将这个函数绑定在子组件(子组件的实例对象上)上并赋值给子组件的v-on的方法名上,然后在对应子组件用this.$eimt(v-on上的方法名 ,参数二可以是子组件要传给父组件的数据,例如this.name,然后父组件接受参数)触发这个事件

三.props:适用于父子组件通信

1.父组件里定义一个方法,然后动态绑定一个方法给子组件,

2.在子组件里面用props:[“方法名”],然后就可以子组件调用这个父组件传过来的方法(父传子)

3.在子组件的函数里面调用这个方法,可以传入参数,然后父组件在最初定义的方法里面接受这个参数(子传父)

四.ref:适用于父子组件通信

1.在父组件引入的子组件里面用ref进行命名,在mounted里面用this.$refs.student(ref名字).$on(“stguigu”(子组件要触发函数名),this.getStudentName(接收子组件传过来的参数的函数))

2.子组件里面用this.$emit(“atigui”(绑定在子组件的函数名)this.name(要传到父组件里面的参数))接收父组件传过来的方法名atiguigu

3.父组件用getStudentName接收子组件传过来的参数

vue2和vue3的区别:

1、vue2的双向数据绑定利用了es5的api object.definepropert(),而vue3中使用了es6的api proxy;

2、生命周期函数钩子不同

3、 vue2使用选项类型api,而vue3使用合成型api;

4、建立数据,vue2把数据放入data属性中,而vue3使用setup()方法;

持久连接(长连接),是指客户端和服务器之间的一种长期维持的连接机制,可以在不断开连接的情况下保持数据传输和通信,提高了客户端与服务器之间的通讯效率和响应速度

Websockets技术是一种以TCP协议为基础的全双工通信机制,从而实现客户端和服务器的实时数据传递,优点是通讯效率高、实时性好,具有良好的跨平台性和可扩展性,支持双向通讯和并发处理。

后端向前端发送数据的方法有哪些:

1.JSON格式:后端将数据转换成JSON格式,然后通过http协议发送给前端

2.5. WebSocket: 后端通过WebSocket技术与前端建立持久的双向通信连接,可以实时地向前端推送数据。这种方式适用于需要实时更新的应用,如即时聊天或实时数据监控。

发送ajax请求

1.xhr  new XMLHttpRequest

2.jQuery:对xhr的封装,对Dom进行操作(用vue和react就是为了减少Dom操作,而JQuery大多都在操作Dom)

3.axios:对xhr的封装,promise类型的,有响应拦截和请求拦截

4.fetch:和xhr平级的,window内置对象里面就有fetch这个方法,并且也是promise类型的,但是缺点:返回的数据包了两层promise,也就是两次.then才能获取数据,最大的缺点是兼容性比较差,IE浏览器就用不了

axios二次封装的原因:

主要是为了实现请求拦截器(可以在请求发起之前处理一些业务,如请求发送之前添加loading效果)和响应拦截器(当数据返回以后可以做些处理,例如返回数据的过滤)

解决跨域方法

1.cors:由后端人员返回响应的时候,加几个特殊的响应头

2.jsonp:巧妙的利用了script标签里面的src属性不受同源策略的限制,但只能解决get请求类型的跨域

3.代理服务器

跨域时浏览器报错关键字:

CORS,Access-Control-Allow-Origin

生命周期

created:vue实例初始化了,还没有开始渲染

mounted:组件在网页上真正渲染完成了(ajax获取信息、事件绑定)

beforeDestroy:解除绑定、销毁子组件

watch和computed的区别

computed:data里面不用定义需要计算的属性(fullname),直接使用计算属性的函数名就可以拿到计算出来的属性值

watch:data里面需要定义计算的属性(fullname),并且需要再watch里面需要监听所有用来计算fullname的属性并且需要将新获取的值赋给旧值,如firstname和lastname

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

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

相关文章

C语言-Win11安装古老的VC6.0

win11安装VC6 有些学校一直还在使用VC6.0,我们尝试在Win1 下安装这个老古董,以下是在win11下安装VC6.0的方法。 点击安装文件 输入产品序列号 修改公共安装文件夹 如果C盘空间足够可以不用修改。 此处会发现鼠标一直在转圈不能完成更新系统,可…

ChatGPT、千问、讯飞星火等在工作中提高效率

提升代码效率 通义灵码 适配性 100多种主流语言(C/C、Java、Python、Go、JavaScript、TypeScript等语言表现更为出色)支持常用 IDE(VS Code、IntelliJ IDEA、GoLand、PyCharm、WebStorm、CLion、PhpStorm、Android Studio、Xcode、iCoding…

记一次 .NET某游戏后端API服务 CPU爆高分析

一:背景 1. 讲故事 前几天有位朋友找到我,说他们的API服务程序跑着跑着CPU满了降不下去,让我帮忙看下怎么回事,现在貌似民间只有我一个人专注dump分析,还是申明一下我dump分析是免费的,如果想学习.NET高级…

进入消息传递的魔法之门:ActiveMQ原理与使用详解

嗨,亲爱的童鞋们!欢迎来到这个充满魔法的世界,今天我们将一同揭开消息中间件ActiveMQ的神秘面纱。如果你是一个对编程稍有兴趣,但又对消息中间件一知半解的小白,不要害怕,我将用最简单、最友好的语言为你呈…

电脑不能读取移动硬盘,但是可以读取U盘解决方法

找到此电脑 右键设备管理器,找到其中的通用串行总线控制器。 注意,凡是插入到电脑当中不能读取的U盘或者移动硬盘,都会在通用串行总线控制器当中显示为USB大容量存储设备 鼠标选中“USB大容量存储设备”,右键卸载它。此时&#x…

静态综合实验

一.搭建拓扑结构 1.根据拓扑结构可以把网段分成14个网段,根据192.168.1.0/24可以划分出ip地址和环回地址 其中环回r1分别是 192.168.1.32/27 192.168.1.32/28 192.168.1.48/28 2.划分完后如图: 二.配置IP地址 注意:为了避免错误&#…

【机器学习300问】49、数据预处理时如何处理类别型特征?

关于特征是什么?以及特征工程是什么意思?在先前我写的文章中已经为大家详细的介绍过了。本文想继续深入特征中的其中一种——类别型特征,来解答一个我自己遇到的困惑,同时记录成文章供大家一起学习。 【机器学习300问】14、什么是…

C++实现FFmpeg音视频实时拉流并播放

1.准备工作: 下载rtsp流媒体服务器rtsp-simple-server,安装go开发环境并编译 编译好后启动流媒体服务器 准备一个要推流的mp4视频文件,如db.mp4 使用ffmpeg开始推流 推流命令: ffmpeg -re -stream_loop -1 -i db.mp4 -c copy -rtsp_transport tcp -f rtsp rtsp://192.168.16…

前端学习之路-创建一个vue项目

每日吐槽:以工作为目的的学习就应该倒着推,任何一个岗位都可以先进去再学习,不管是培训班还是学校,知识点都有滞后性,虽然react被疯狂鼓吹但是Vue依然很抗打,学习的方法依然是百度老师的,以作记…

把本地文件上传到HDFS上操作步骤

因为条件有限,我这里以虚拟机centos为例 实验条件:我在虚拟机上创建了三台节点,部署了hadoop,把笔记本上的数据上传到hdfs中 数据打包上传到虚拟机节点上 采用的是rz命令,可以帮我们上传数据 没有的话可以使用命令安装…

开源流程图表库(02):Draw.io在线绘制各类图表,导出html使用

一、什么是Draw.io及其功能 Draw.io是一款免费的在线图表绘制工具,用于创建各种类型的图表和图形,如流程图、组织结构图、UML图、网络拓扑图、思维导图等。它提供了一个直观易用的界面,可以通过拖放和连接不同的图形元素来创建和编辑图表。 …

图神经网络实战(6)——使用PyTorch构建图神经网络

图神经网络实战(6)——使用PyTorch构建图神经网络 0. 前言1. 传统机器学习与人工智能2. 人工神经网络基础2.1 人工神经网络组成2.2 神经网络的训练 3. 图神经网络4. 使用香草神经网络执行节点分类4.1 数据集构建4.2 模型构建4.3 模型训练 5. 实现香草图神…

微服务篇-C 深入理解第一代微服务(SpringCloud)_V 深入理解Config分布式配置中心

原创作者:田超凡(程序员田宝宝) 版权所有,引用请注明原作者,严禁复制转载 Part 1 理论部分 1 什么是SpringCloud Config? 当一个系统中的配置文件发生改变的时候,我们需要重新启动该服务&am…

电脑访问网页获取路由器WAN口内网IP

因为运维过程中容易出现路由器配置了固定IP但是没人知道后台密码,不确定这个办公室的IP地址,且使用tracert路由追踪也只会出现路由器的LAN口网关并不会出现WAN口IP。 今日正好遇到了个好方法,经过测试可以正常使用。 方法如下: 内…

Jenkins用户角色权限管理

Jenkins作为一款强大的自动化构建与持续集成工具,用户角色权限管理是其功能体系中不可或缺的一环。有效的权限管理能确保项目的安全稳定,避免敏感信息泄露。 1、安装插件:Role-based Authorization Strategy 系统管理 > 插件管理 > 可…

大话设计模式之模板方法模式

模板方法模式(Template Method Pattern)是一种行为设计模式,它定义了一个算法的框架,将特定步骤的实现延迟到子类中。模板方法模式通过在父类中定义算法的骨架,而将具体步骤的实现留给子类来完成,从而使子类…

c++的学习之路:5、类和对象(1)

一、面向对象和面向过程 在说这个定义时,我就拿c语言举例,在c语言写程序的时候,基本上就是缺什么函数,就去手搓一个函数,写的程序也只是调用函数的,而c就是基于面向对象的开发,他关注的不再是单…

5、双亲委派机制

双亲委派机制指的是:当一个类加载器接收到加载类的任务时,会自底向上查找是否加载过, 再由顶向下进行加载。 详细流程: 每个类加载器都有一个父类加载器。父类加载器的关系如下,启动类加载器没有父类加载器&#xff1…

WPF使用外部字体,思源黑体,为例子

1.在工程中新建文件夹&#xff0c;命名为“Font"。 2.将下载好的字体文件复制到Font文件夹。 3.在工程中&#xff0c;加入静态资源 <Window.Resources><FontFamily x:Key"SYBold">/AnalyzeImage;Component/Font/#思源黑体 CN Bold</FontFamily…

【亲测】如何注册使用Midjourney

文章目录 1.Midjourney是什么2.Midjourney适合哪些人群3.如何订阅Midjourney3.1&#xff1a;注册登录步骤3.2&#xff1a;选择订阅方案3.3&#xff1a;用虚拟信用卡付费订阅 4.Midjourney基础使用教程 原文链接&#xff1a; Midjourney 如何订阅注册及使用基础教程 OnlyFans …