vue2.0及起步(前端面试知识积累)

news2024/11/6 3:13:26

1、需要了解的vue概要知识

1、vue是什么?

一套用于构建用户界面的渐进式JavaScript框架。

为什么vue被称为是渐进式JS框架?
答:Vue允许开发者在不同的项目中以渐进式的方式使用它,这种渐进式表现在以下的方面:

  1. 逐步采用:Vue可以被逐步引用到现有的项目中,而不是需要一次性重写整个应用。可以选择将Vue用于某个小部分的界面,或者将其应用于整个应用程序的开发。
  2. 轻量级核心:Vue的核心库非常轻量级,只关注图层,并且易于学习和上手。你可以根据自己的需求选择性地添加插件和库来扩展Vue的功能,而不需要太多的复杂性。
  3. 单文件组件:Vue支持单文件组件,即将模版、样式和逻辑组合在一个文件中。这种方式可以使组件化开发更加方便,可以逐步地将应用程序拆分成可重用组件。
  4. 逐步增强 : vue提供了丰富的功能和工具,包括路由、状态管理、服务器端渲染等,但你可以根据项目的需求选择性地使用这些功能,而不是一次性全部采用。

总的来说,Vue的渐进式特性使得开发者可以根据项目的需求和自身技术栈的情况灵活使用它,这也是Vue被广泛应用的重要原因之一。

2、Vue的创始人

  • 2013年,创始人是尤雨溪,2013年受到Angular框架的启发,开发出一款轻量框架-Seed,同年12月将其改名为Vue,版本号0.6.0
  • 2014年,开始正式对外发布,版本号为0.8.0,Taylor otwell在Twitter上发布动态,说自己在学习Vue.js,引起Taylor otwell的技术粉丝也开始学习,Vue.js在此相当于得到了宣传和推广。

Taylor Otwell 是一位知名的软件工程师,他是 Laravel 框架的创始人和主要开发者。Laravel 是一个流行的 PHP Web 开发框架,被广泛用于构建各种规模的 Web 应用程序。Otwell 也是 Laravel 生态系统中其他工具和项目的创建者,他的工作对于推动 PHP 开发社区的发展和创新起到了重要作用。

  • 2015年,10月27日,正式发布版本Vue1.0.0 Evangelion(新世纪福音战士)
  • 2016年,10月1日,正式发布版本Vue2.0.0 Ghost in the Shell(攻壳机动队)
  • 2020年,9月18日,正式发布Vue 3.0.0 One Plece(海贼王)

后起之秀(Vue之前有ReactAngular,Vue的创建有参考Angular),生态完善,已成为国内前端工程师必备技能。

3、Vue的特点

采用组件化模式,提高代码复用率,且让代码更好维护。

image.png

  • 提高代码复用率:如上vue开发的项目中,如果开发的应用中多次出现活动窗口这个小窗口,就可以将推荐活动窗口处理成一个组件,在这个项目中,哪里使用,就在哪里调用就可以了。提高了代码的复用率。
  • 更好维护:如果以后想改News这个模块,就可以直接在封装好的News这个组件中去改,而不会触碰到Activity和Hot组件。

声明式编码,让编码人员无需直接操作DOM,提高开发效率。

image.png

声明式编码vs命令式编码3
命令式编码和声明式编码是两种不同的编程范式,它们的区别主要在于编写代码的方式和思维方式:

  1. 命令式编码:
  • 在命令式编码中,开发者需要明确地指示计算机执行每一个步骤以达到特定的结果。
  • 开发者需要编写详细的指令,包括控制流程、数据处理和状态管理等。
  • 典型的命令式编码语言包括C、Java和JavaScript等。
  • 例如,使用循环来迭代数组并对每个元素执行特定的操作就是典型的命令式编码风格。
  1. 声明式编码:
  • 在声明式编码中,开发者只需要描述所需的结果,而不需详细说明如何实现。
  • 开发者将更多精力放在定义问题的本质和所需的结果上,而不是具体的实现细节。
  • 典型的声明式编码范例包括SQL和HTML。
  • 例如,在HTML中,你描述的解构和内容,而不需要关系如何在浏览器中渲染它们。

总的来说,命令式编码更加关注实现的细节和控制流程,而声明式编码更加关注所需的结果和问题的描述。对于声明式编码,需要记忆。

使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。


Vue 使用虚拟 DOM(Virtual DOM)作为其核心机制之一,这是一种性能优化手段,用于提高 Web 应用程序的渲染效率和性能。理解 Vue 中的虚拟 DOM 有助于理解 Vue 是如何工作的以及为什么它在性能方面表现优秀。

  1. 什么是虚拟 DOM
    • 虚拟 DOM 是一个轻量级的 JavaScript 对象树,它对应着真实 DOM 中的元素和组件。
    • Vue 组件的模板被编译成虚拟 DOM 树,而不是直接操作真实的 DOM 元素。
    • 虚拟 DOM 可以在内存中进行操作和修改,而无需直接操作浏览器中的 DOM。
  2. 为什么使用虚拟 DOM
    • 虚拟 DOM 允许 Vue 在更新数据时进行高效的 DOM 操作,因为操作的是 JavaScript 对象而不是实际的 DOM 元素。
    • Vue 使用虚拟 DOM 实现了一种称为 “diffing” 的算法,用于比较新旧虚拟 DOM 树的差异,并最小化实际 DOM 的操作次数。
    • 通过减少实际 DOM 操作的次数,Vue 能够提高页面的渲染效率和性能,尤其是在大型应用程序中或有大量动态数据的情况下。
  3. 如何工作
    • 当数据发生变化时,Vue 会重新渲染虚拟 DOM 树。
    • Vue 使用 diff 算法比较新旧虚拟 DOM 树的差异,并将变化的部分应用到实际的 DOM 中,从而更新用户界面。
    • 这种方式避免了直接操作实际 DOM,提高了性能并确保页面的快速响应。

总的来说,Vue 中的虚拟 DOM 通过在内存中操作 JavaScript 对象来提高页面渲染效率,减少了直接操作实际 DOM 的次数,从而改善了性能并提高了用户体验。

image.png

学习Vue之前需要掌握的JavaScript基础知识?

  • ES6语法规范(解构赋值、模版字符串、箭头函数等等)
  • ES6模块化(默认暴露、分别暴露、统一暴露、impo`rt、isport)
  • 包管理器(npm、Yarn)
  • 原型、原型链
  • 数组常用方法(如:过滤、加工、筛选最值等)
  • axios
  • promise(深入理解现代JS参考书P159)

补充1:最流行和常用的JavaScript 的包管理工具

  1. npm(Node Package Manager):npm 是 Node.js 的官方包管理工具,也是最常用的 JavaScript 包管理工具之一。它提供了一个庞大的包仓库,开发者可以在其中找到并安装各种 JavaScript 包。
  2. Yarn:Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合开发的 JavaScript 包管理工具,旨在解决 npm 的一些性能和安全方面的问题。Yarn 支持并行安装,能够更快地下载和安装依赖包。
  3. pnpm:pnpm 是另一个 JavaScript 包管理工具,与 npm 和 Yarn 不同的是,pnpm 采用符号链接技术来共享依赖包,节省了磁盘空间,并且可以快速安装依赖包。
  4. Bower:Bower 是一个专门用于管理前端库和框架的包管理工具,但在近年来已经逐渐被 npm 和 Yarn 取代。
  5. pnpm:与传统的 npm 或 Yarn 不同,pnpm 采用符号链接技术共享依赖,这意味着同一个包只有一个实例被保存在磁盘上,可以节省大量磁盘空间。
  6. pnpm:pnpm 也是一个 JavaScript 包管理工具,它采用符号链接技术共享依赖,可以节省磁盘空间,并且安装依赖的速度比较快。
  7. Yarn 2(也称为 Berry):是 Yarn 的下一代版本,具有改进的性能和更好的可扩展性。Yarn 2 与之前的版本不兼容,采用了一些新的工作流程和配置方式。

这些都是 JavaScript 社区中常用的包管理工具,开发者可以根据自己的需求和偏好选择合适的工具。

补充1:axios和ajax和XMLHttpRequest之间的关系

Axios定义

Axios是一个基于promise 的 HTTP 库(类似于jQuery的Ajax,用于HTTP请求),用于在浏览器和 Node.js 中进行 HTTP 请求。它提供了简单易用的 API,可以用于发送各种类型的 HTTP 请求(如 GET、POST、PUT、DELETE 等),并处理响应数据。

Axios原理:

axios(ajax i/o system)不是一种新技术,本质上也是对原生XHR(XMLHttpReques)的封装,只不过它是基于Promise的,是Promise的实现版本,符合最新的ES规范。

Axios的功能和特点:

  1. 简单易用:Axios 提供了简洁的 API,使得发送 HTTP 请求变得非常容易。它支持链式调用,可以方便地配置请求和处理响应。
  2. 基于 Promise:Axios 使用 Promise 对象来处理异步操作,使得处理 HTTP 请求变得更加灵活和可靠。你可以使用 async/await 或者 Promise 的 then/catch 方法来处理请求结果。
  3. 浏览器和 Node.js 兼容:Axios 可以在浏览器端和 Node.js 环境中都可以使用,这使得它非常适用于开发全栈应用程序。
  4. 支持请求和响应拦截器:Axios 提供了请求和响应拦截器,允许你在发送请求前和处理响应后进行一些自定义的操作,比如添加请求头、修改请求数据、处理错误等。
  5. 支持取消请求:Axios 提供了取消请求的功能,可以通过取消令牌来中止正在进行的请求,防止不必要的请求发送。
  6. 自动转换请求和响应数据:Axios 提供了自动转换请求和响应数据的功能,可以根据 Content-Type 自动将请求数据转换为合适的格式,并将响应数据转换为 JavaScript 对象。

综上,Axios 是一个功能强大、易用的 HTTP 客户端库,广泛用于发送 HTTP 请求并处理响应数据,是现代 JavaScript 应用开发中的常用工具之一。

axios和ajax的比较:

  1. API 风格
    • Axios 提供了基于 Promise 的 API,使得处理异步操作更加方便和可靠。它支持使用 async/await 或者 Promise 的 then/catch 方法来处理请求和响应。
    • AJAX 使用传统的回调函数来处理异步操作,可能会导致回调地狱(callback hell)和代码不易维护的问题。
  2. 浏览器兼容性
    • Axios 支持在浏览器端和 Node.js 环境中使用,这使得它更具灵活性,可以在客户端和服务器端都使用相同的代码。
    • AJAX 主要用于浏览器端,虽然也可以在 Node.js 中使用,但并不是主要用途。
  3. 功能扩展
    • Axios 提供了丰富的功能,比如请求和响应拦截器、取消请求、自动转换请求和响应数据等。
    • AJAX 原生的功能相对较少,通常需要借助其他库或框架来扩展其功能。
  4. 错误处理
    • Axios 提供了更强大和灵活的错误处理机制,可以方便地处理各种类型的错误,并提供了全局的错误处理方式。
    • AJAX 的错误处理相对简单,通常需要通过回调函数来处理错误,可能会造成代码的混乱和冗余。

综上,尽管 Axios 和 AJAX 都可以用于发送 HTTP 请求,但 Axios 在 API 风格、浏览器兼容性、功能扩展和错误处理等方面都有优势,因此在现代 JavaScript 应用开发中更加常用和推荐。

axios和ajax和XMLHttpRequest之间的关系

  • Ajax的实现依赖于XMLHttpRequest对象,即XMLHttpRequest可以实现Ajax。
  • Axios在此基础上封装了XMLHttpRequest,即Axios可以实现Ajax。

参考学习指路:儒雅的烤地瓜博主的文章https://blog.csdn.net/sunyctf/article/details/129002056?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170894967816800226599625%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=170894967816800226599625&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2alltop_positive~default-2-129002056-null-null.142v99pc_search_result_base7&utm_term=Axios&spm=1018.2226.3001.4187 地瓜大大的这篇文很详细的讲解了这三者之间的关系,给大家指路学习。

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

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

相关文章

linux中将普通用户添加sudo权限

1.登录root权限账号,编辑/etc/sudoers文件 2.找到"root ALL(ALL) ALL",并在下面添加普通用户 格式:username ALL(ALL) ALL vim /etc/sudoers ## Next comes the main part: which users can run what software …

搜维尔科技:【周刊】适用于虚拟现实VR中的OptiTrack

适用于 VR 的 OptiTrack 我们通过优化对虚拟现实跟踪最重要的性能指标,打造世界上最准确、最易于使用的广域 VR 跟踪器。其结果是为任何头戴式显示器 (HMD) 或洞穴自动沉浸式环境提供超低延迟、极其流畅的跟踪。 OptiTrack 主动式 OptiTrack 世界领先的跟踪精度和…

调度服务看门狗配置

查看当前服务器相关的sqlserver服务 在任务栏右键,选择点击启动任务管理器 依次点击,打开服务 找到sqlserver 相关的服务, 确认这些服务是启动状态 将相关服务在看门狗中进行配置 选择调度服务,双击打开 根据上面找的服务进行勾…

【C进阶】顺序表详解

文章目录 📝线性表的概念🌠 顺序表🌉顺序表的概念 🌠声明--接口🌉启动🌠初始化🌉扩容🌠尾插🌉 打印🌠销毁🌉 尾删🌠头插🌉…

【大厂AI课学习笔记NO.54】2.3深度学习开发任务实例(7)数据标注和数据集拆分

数据标注 有时我们会把特征工程和数据集的标注弄混淆,在普通的机器学习项目中,我们需要进行特征工程,但是在深度学习项目过程中,我们需要进行数据标注工作。 标注工具 在本案例中,使用的是开源的标注工具Labelme&am…

SSMBUG之 url +

1. Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured. 经查, 书写一切正常. 注意到此时yml文件的图标是一个红色的Y而不是绿色的spring , 推测没有正确加载. 重新创建项目, 所有东西拷贝一份便恢复正常…

递归与回溯(一)

递归 递归一定要有出口,不然会无限调用,死循环 string fun(int n){if(n0)return "a";if(n1)return "b";return fun(n - 1) fun(n - 2); }输出前8种结果: 双写数字递归例子 注意递归的return int doubleNum(int n){i…

内衣洗衣机哪个牌子好用?甄选安利四款优质好用的内衣洗衣机

内衣洗衣机是近几年新兴的一种家用电器产品,正日益引起人们的重视。但是,面对市面上品牌繁多、款式繁多的内衣洗衣机,使得很多人都不知道该如何选择。身为一个数码家电博主,我知道这类产品在挑选方面有着比较深入的了解。为此&…

python3GUI--酷狗音乐By:PyQt5(附下载地址)

文章目录 一.前言二.展示1.主界面2.乐库3.歌单3.频道4.视频5.我的频道6.视频7.听书8.探索9.其他细节1.搜索中间页2.主菜单3.歌单详情4.托盘菜单 三.心得四.总结 一.前言 之前仿作了几款音乐播放器,有的有功…

【底层解读】ArrayList源码学习

成员变量 学习源码前,我们还是先看一下ArrayList中成员变量有哪些 构造函数 ArrayList一共有三个构造函数。 第一个:带有指定初始容量的构造函数 第二个:空参构造 第三个:包含指定集合的构造函数 OK,看完构造函数&a…

Numpy 数组添加行

参考:Add Row to Numpy Array 在机器学习和数据分析中,经常需要处理大型数据集。Numpy是Python中一个非常有用的库,它提供了高性能的多维数组对象以及用于处理这些数组的函数。在Numpy中,可以使用numpy.append()函数来添加行到一…

【Git教程】(三)提交详解 —— add、commit、status、stach命令的说明,提交散列值与历史,多次提交及忽略 ~

Git教程 提交详解 1️⃣ 访问权限与时间戳2️⃣ add命令与 commit 命令3️⃣ 提交散列值4️⃣ 提交历史5️⃣ 一种特别的提交查看方法6️⃣ 同一项目的多部不同历史6.1 部分输出:-n6.2 格式化输出:--format、--oneline6.3 统计修改信息:--st…

异常的处理

文章目录 1. 异常概述1.1 异常总结:1.2 什么是程序的异常1.3 异常的抛出机制1.4 如何对待异常 2. Java异常体系2.1 Error和Exception2.2 Throwable2.3 编译时异常和运行时异常 3. 常见的错误和异常3.1 Error3.2 运行时异常3.3 编译时异常 4. 异常的处理4.1 异常处理…

大好河山集团带医生的旅游团 守护旅客安康多年

回首大好河山集团成立之初,大好河山就秉持着对旅客安康的关切,怎么能让较高年龄的老人也能畅游祖国的大好河山,是大好河山集团迫切需要解决的问题,因此大好河山集团旗下部分旅游团设有带医生的旅游团为此类游客服务,他…

docker容器技术(2)

docker容器数据卷 什么是数据卷? 在Docker中,数据卷(Data Volumes)是一种特殊的目录,可以在容器和主机之间共享数据。它允许容器内的文件持久存在,并且可以被多个容器共享和访问。 数据卷的主要作用如下&am…

Pycharm 配置Django 框架

Pycharm 配置Django 框架 一、创建第一个django项目 先在自己所在盘创建一个文件夹”projectDjango“ 二、打开pycharm专业版,打开刚刚新建的“projectDjango”项目。 三、打开菜单栏“File"->“Settings” 选择自己安装的python版本 四、安装Django库 1.点…

浅浅的画一个STDP的图像吧

stdp最重要的是两个窗口函数 根据这个方程我们刻画出他的轨迹,代码如下 import numpy as np import matplotlib.pyplot as plt# 定义STDP参数 tau_pos 30 # 正向突触权重变化的时间常数 tau_neg 30 # 负向突触权重变化的时间常数 A_pos 0.1 # 正向突触权重变…

解决谷歌浏览器,每次重启都重置所有设置的问题

一、问题: 修改谷歌浏览器的设置 关闭浏览器再打开设置页面后,会显示(部分设置已重置Chrome检测到您的部分设置被其他程序篡改了,因此已将这些设置重置为原始默认设置。了解详情) 之前的设置被重置了 二、解决 创建—…

Python入门必学:print函数--从基础语法到高级用法

Python入门必学:print函数–从基础语法到高级用法 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 👈 希望得到您…

1.0 RK3399项目开发实录-Ubuntu环境搭建(物联技术666)

1.下载Ubuntu所需的版本:Index of /releases 2.安装vmplayer:Download VMware Workstation Player | VMware 3.安装Ubuntu时,磁盘空间尽量大些,开发板系统包都比较大,避免存不下,建议空间100G。 关闭Ubuntu自动更新…