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

news2025/1/11 8:04:26

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.coloradmin.cn/o/1550414.html

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

相关文章

【R语言从0到精通】-1-下载R语言与R最基础内容

在本科,没有人教的情况下,艰难的自学了R语言,因此我想能出一个R语言系列教程,在帮助大家的同时,温故而知新,特别如果你是生物或者医学从业者,那本教程正好合适,因为我也是生物人&…

Microsoft .NET 应用程序性能监控

什么是 .NET监控 Microsoft .NET 监视在确保可以开发和部署应用程序而不必面对性能滞后或中断方面发挥着重要作用。它使用警报、增长趋势报告和数据可视化技术来帮助管理员确保 Microsoft .NET 平台的全天候可用性。Microsoft.NET 性能监视是一种检测性能异常的先发制人方法&a…

2024年腾讯云4核8g服务器并发数、优惠价格、支持多少人在线?

腾讯云4核8G服务器价格:轻量4核8G12M优惠价格646元15个月、CVM S5服务器4核8G配置1437元买1年送3个月。腾讯云4核8G服务器支持多少人同时在线?支持30个并发数,可容纳日均1万IP人数访问。腾讯云百科txybk.com整理4核8G服务器支持多少人同时在线…

动手学机器学习笔记

初探机器学习 “两只手”代表的是人工智能可以做的两大类任务,即预测与决策。 “四条腿”则代表支撑人工智能的四大类科学技术,包括搜索、推理、学习和博弈。 非参数化模型(nonparametric model):与参数化模型相反&…

四川易点慧电子商务抖音小店:安全购物,无忧体验

在当今这个电子商务飞速发展的时代,线上购物已成为人们日常生活中不可或缺的一部分。然而,随着网络交易的日益频繁,安全问题也逐渐成为了消费者最为关注的问题之一。四川易点慧电子商务抖音小店深知消费者的担忧,始终将安全保障放…

2024消息预知在线客服系统php网站源码

新增消息预知&#xff0c;消息撤回&#xff0c;消息已读未读&#xff0c; 修复需要刷新才能收到消息 修复客户来源地址 修复消息提示音 修复桌面推送提醒 要求服务器环境&#xff1a; 宝塔面板 &#xff0c;Nginx1.16-1.18&#xff0c;7.2.23<php<7.3&#xff08;因…

LabVIEW单片机的废气再循环EGR检测系统

LabVIEW单片机的废气再循环EGR检测系统 实现了一种基于LabVIEW和STM32F103VET6单片机的EGR&#xff08;废气再循环&#xff09;检测系统&#xff0c;监测和控制船用二冲程柴油机的EGR运行状态。通过替代传统的NI采集卡&#xff0c;系统不仅降低了成本&#xff0c;同时也提升了数…

居家办公:职场新趋势与挑战

随着科技的飞速发展&#xff0c;互联网和智能设备的普及&#xff0c;居家办公逐渐成为职场新趋势。近年来&#xff0c;受疫情影响&#xff0c;许多企业纷纷采取居家办公模式&#xff0c;以保障员工健康安全。然而&#xff0c;居家办公在带来便利的同时&#xff0c;也带来了一系…

基于Pytorch的验证码识别模型应用

前言 在做OCR文字识别的时候&#xff0c;或多或少会接触一些验证码图片&#xff0c;这里收集了一些验证码图片&#xff0c;可以对验证码进行识别&#xff0c;可以识别4到6位&#xff0c;纯数字型、数字字母型和纯字母型的一些验证码&#xff0c;准确率还是相当高&#xff0c;需…

机器学习——聚类算法-KMeans聚类

机器学习——聚类算法-KMeans聚类 在机器学习中&#xff0c;聚类是一种无监督学习方法&#xff0c;用于将数据集中的样本划分为若干个簇&#xff0c;使得同一簇内的样本相似度高&#xff0c;不同簇之间的样本相似度低。KMeans聚类是一种常用的聚类算法之一&#xff0c;本文将介…

【秒杀】网课视频播放速度太慢,js提升网页视频播放速率,在浏览器中修改视频播放速度

目录 前言&#xff08;写这篇文章的缘由&#xff09; 问题描述 解决方法 1、打开开发者工具 2、点击控制台 3、输入下面这行代码 番外 自定义视频速度 番外的番外&#xff08;这块可以不看&#xff09; 结语 前言&#xff08;写这篇文章的缘由&#xff09; 作为一名2…

看一遍就理解:IO模型详解

大家好&#xff0c;今天我们一起来学习IO模型。在本文开始前呢&#xff0c;先问问大家几个问题哈~ 什么是IO呢&#xff1f;什么是阻塞非阻塞IO&#xff1f;什么是同步异步IO&#xff1f;什么是IO多路复用&#xff1f;select/epoll跟IO模型有什么关系&#xff1f;有几种经典IO模…

备考ICA----Istio实验9---熔断Circuit Breaking 实验

备考ICA----Istio实验9—熔断Circuit Breaking 实验 1. 环境准备 创建httpbin环境 kubectl apply -f istio/samples/httpbin/httpbin.yaml kubectl get svc httpbin2. 创建测试用客户端 kubectl apply -f istio/samples/httpbin/sample-client/fortio-deploy.yaml3. 创建Ht…

企业文件交换怎样进行有效防泄密管控?选对方案才能事半功倍

一、数据防泄密面临的挑战 数据流转才能释放价值&#xff0c;在企业生产经营中&#xff0c;数据和文件交换是业务有序开展的基础。文件交换会涉及不同的网络、系统及人员角色&#xff0c;存在泄露的安全风险&#xff1b;为此&#xff0c;不少企业采用或规划采用终端DLP、网络D…

C语言文件操作详解

文件是什么 在我们日常使用的电脑上我们在电脑磁盘上会看到许许多多的文件夹&#xff0c;那里面的东西其实就是文件&#xff0c;为什么我们要使用文件&#xff1f;那是因为我们的电脑肯定会要用来存储东西的&#xff0c;如果没有文件&#xff0c;那么我们的东西都全部存放在内…

ruoyi-nbcio-plus基于vue3的flowable其它元素(目前主要是元素文档)的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…

借助剪映软件生成原创视频(真人人声,免VIP)

civilpy&#xff1a;借助各大模型的优点生成原创视频&#xff08;真人人声&#xff09;Plus0 赞同 0 评论文章​编辑 是的&#xff0c;剪映也出了声音克隆了&#xff0c;只需要十几秒的录音就可以克隆自己的声音&#xff0c;虽然微瑕&#xff0c;但是对于不习惯机器音的很多创…

python实战之基础篇

1. 注释 # coding utf-8 # 该注释放到文件第一行, 这个注释告诉python解释器该文件的编码集是UTF-82. 导入语句有三种形式 import <模块名> from <模块名> import <代码元素> from <模块名> import <代码元素> as <代码元素别名>3. 获取…

Spring Boot集成JPA快速入门demo

1.JPA介绍 JPA (Java Persistence API) 是 Sun 官方提出的 Java 持久化规范。它为 Java 开发人员提供了一种对象/关联映射工具来管理 Java 应用中的关系数据。他的出现主要是为了简化现有的持久化开发工作和整合 ORM 技术&#xff0c;结束现在 Hibernate&#xff0c;TopLink&am…

Vue3状态管理库--Pinia

Pinia快速入门 一、什么是Pinia &#xff1f; Pinia 是 Vue 的专属的最新状态管理库 &#xff0c;是 Vuex 状态管理工具的替代品。 Pinia官网链接 提供更加简单的API &#xff08;去掉了 mutation &#xff09;提供符合组合式风格的API &#xff08;和 Vue3 新语法统一&…