前端面试常见问题 有使用过vue吗?说说你对vue的理解
sinye56 2024-10-26 14:44 15 浏览 0 评论
#一、从历史说起
Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解
- 石器时代
- 文明时代
- 工业革命时代
- 百花齐放时代
#石器时代
石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网
最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如当时的Google（1998年）
#文明时代
ASP，JSP大家应该都不会太陌生，最早出现于 2005 年左右，先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，增强了 WEB 与服务端的交互的安全性，类似于下面这样，其实就是Java + HTML
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSP demo</title> </head> <body> <img src="http://localhost:8080/web05_session/1.jpg" width=200 height=100 /> </body> </html>
JSP有一个很大的缺点，就是不太灵活，因为JSP是在服务器端执行的，通常返回该客户端的就是一个HTML文本。我们每次的请求：获取的数据、内容的加载，都是服务器为我们返回渲染完成之后的 DOM，这也就使得我们开发网站的灵活度大打折扣在这种情况下，同年：Ajax火了(小细节，这里为什么说火了，因为 Ajax 技术并不是 2005 年出现的，他的雏形是 1999 年)，现在看来很常见的技术手段，在当时可是珍贵无比
#工业革命时代
到这里大家就更熟悉了，移动设备的普及，Jquery的出现，以及SPA（Single Page Application 单页面应用）的雏形，Backbone EmberJS AngularJS 这样一批前端框架随之出现，但当时SPA的路不好走，例如SEO问题，SPA 过多的页面、复杂场景下 View 的绑定等，都没有很好的处理经过这几年的飞速发展，节约了开发人员大量的精力、降低了开发者和开发过程的门槛，极大提升了开发效率和迭代速度，我们可以称之其为工业时代
#百花齐放时代
这里没有文字，放一张图感受一下
PS：这里为什么要说这么多Web的历史，我们可以看到Web技术的变化之大与快，每一种新的技术出现都是一些特定场景的解决方案，那我们今天的主角Vue又是为了解决什么呢？我们接着往下看
#二、vue是什么
Vue.js（/vju?/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目同时也是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互PS: Vue作者尤雨溪是在为AngularJS工作之后开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架最早发布于2014年2月
#三、Vue核心特性
#数据驱动（MVVM)
MVVM表示的是 Model-View-ViewModel
- Model：模型层，负责处理业务逻辑以及和服务器端进行交互
- View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
- ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁
这时候需要一张直观的关系图，如下
#组件化
1.什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件2.组件化的优势
- 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
- 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
- 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级
#指令系统
解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
- 常用的指令
- 条件渲染指令 v-if
- 列表渲染指令v-for
- 属性绑定指令v-bind
- 事件绑定指令v-on
- 双向数据绑定指令v-model
没有指令之前我们是怎么做的？是不是先要获取到DOM然后在....干点啥
#四、Vue跟传统开发的区别
没有落地使用场景的革命不是好革命，就以一个高频的应用场景来示意吧注册账号这个需求大家应该很熟悉了，如下
用jquery来实现大概的思路就是选择流程dom对象，点击按钮隐藏当前活动流程dom对象，显示下一流程dom对象如下图(代码就不上了，上了就篇文章就没了..)
用vue来实现，我们知道vue基本不操作dom节点， 双向绑定使dom节点跟视图绑定后，通过修改变量的值控制dom节点的各类属性。所以其实现思路为：视图层使用一变量控制dom节点显示与否，点击按钮则改变该变量，如下图
总结就是：
- Vue所有的界面事件，都是只去操作数据的，Jquery操作DOM
- Vue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOM
#五、Vue和React对比
这里就做几个简单的类比吧，当然没有好坏之分，只是使用场景不同
#相同点
- 都有组件化思想
- 都支持服务器端渲染
- 都有Virtual DOM（虚拟dom）
- 数据驱动视图
- 都有支持native的方案：Vue的weex、React的React native
- 都有自己的构建工具：Vue的vue-cli、React的Create React App
#区别
- 数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流
- 数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
- 组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
- diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM
vue
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
核心思想是：数据驱动、组件系统。
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
特点：mvvm m=mvc module 模型 v=view 视图 c=controller 控制器
vue-指令
v-model 数据的双向绑定
data 返回对象用 return
v-for 循环 格式 v-for="字段名 in(of) 数组json"
v-show 显示 隐藏 传递的值为布尔值 true false 默认为false
v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false;控制一个元素是否显示(会对DOM进行创建和删除操作 有较高的切换性能消耗)
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-bind 动态绑定 作用： 及时对页面的数据进行更改 简写" : " 三种绑定方法 1、对象型'{red:isred}'2、三目型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-on 绑定事件 函数必须写在methods里面
@click 快捷方法
v-on @ 事件修饰符：
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
*.once：只会触发一次
v-text 解析文本
v-html 解析html标签
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出
8个生命周期(钩子函数):
beforecreated：el 和 data 并未初始化 -------------在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：完成了 data 数据的初始化，el没有 -----------在实例创建完成后被立即调用。在这一步，实例已完成以下的配置:数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：完成了 el 和 data 初始化 --------在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
mounted :完成挂载--------el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
该钩子在服务器端渲染期间不被调用。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：
updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }
该钩子在服务器端渲染期间不被调用。
beforeDestroy：例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
我建了一个【前端学习群】，【免费领取学习资料】或学习的同学可以关注我：前端学习交流 - 知乎
相关推荐
- Linux 如何使用dd命令来复制和转换数据?
-
简介Linux中的dd命令是一个功能强大的数据复制和转换实用程序。它以较低级别运行，通常用于创建可启动的USB驱动器、克隆磁盘和生成随机数据等任务。dd全称可以为：dataduplica...
- Linux高阶知识:Linux 中的隐藏文件
-
在Linux系统的世界里，隐藏文件扮演着极为关键且神秘的角色。它们如同隐匿在黑暗中的守护者，默默支撑着系统的稳定运行，同时又蕴含着丰富的配置信息与个性化设置。对于普通用户而言，这些隐藏文件往往被忽...
- PDFsam Basic——pdf合并拆分工具推荐
-
PDFsamBasic是一款PDF编辑软件，可以帮助用户进行PDF文件的合并、拆分、提取等操作，让用户能轻松的对PDF文件进行自己想要的编辑，适用于Windows，Mac和Linux，自2006年以...
- linux中如何比较两个文件的异同?
-
有一个diff的命令可以达到这个目的。常用参数："-b"忽略空格"-B"忽略空行"-i"忽略大小写"-c"显示文件所有内容并标示不同"-r"对比目录"-u"合并输出...
- Linux 使用 cut 进行文本提取操作
-
简介Linux中的cut命令是一个命令行实用程序，用于从文件或标准输入中提取文本行的部分。当希望从文件或数据流中提取特定字段或列时，例如处理以逗号分隔或制表符分隔的文件时，它非常有用。基础语法c...
- linux基础命令之split命令
-
split命令是用于分割文件内容的命令，对于大文件非常适用，可以分割成多个小文件。语法：split参数文件命令-n参数：n为具体的数字，表示要分割的行数；如图1，将一个有6行的文件，使用split...
- linux文件分割命令split
-
split命令用于切割文件，将大文件切割成若干个小文件。语法：split[option]srcFiledestFile前缀常用选项：-b指定每多少字节切成一个小文件，大小是一个整数和可选单位...
- CentOS修改网络配置
-
简介：关于CentOS获取IP地址的方法主要有两种，动态获取和静态设置。在配置网络之前先要知道CentOS的网卡名称是什么，CentOS可通过命令ipaddr查看。本文主要通过介绍CentOS网卡...
- 硬核运维:这些Linux网络命令超实用，排查故障一把抓!
-
在Linux的世界里，网络命令就像运维人员的“瑞士军刀”，无论你是需要快速定位网络故障、监控流量，还是优化网络配置，这些工具都能派上大用场。作为一名运维老兵，我深知网络问题可能让人抓狂——时而是丢包，...
- Linux系统中使用nmcli指令修改网络属性
-
摘要：Linux系统提供了很多命令行工具，可以让用户方便地查看和管理系统的各种信息，如硬件配置、内存使用、进程状态、网卡信息等。nmcli是Centos7之后的命令，Nmcli命令是NetworkMa...
- Linux网络命令
-
1、配置IP地址IP地址是计算机在互联网中唯一的地址编码。每台计算机如果需要接入网络和其他计算机进行数据通信，就必须配置唯一的公网IP地址。vi/etc/sysconfig/network-sc...
- 总结! Linux VXLAN 的配置与使用方法
-
今天要讲的主题是LinuxVXLAN，啥玩意？VXLAN？这有啥用？先说说VXLAN是啥吧VXLAN（VirtualeXtensibleLocalAreaNetwork）是一种网络虚拟...
- Linux常用配置详解
-
一、CentOS（Linux）配置主机名和IP地址的映射关系1、修改主机名#查看主机名hostname#修改主机名hostnameyuanke012、配置主机名和IP地址的映射关系#...
- Linux网络配置
-
我们已经成功在虚拟机中创建了一个Linux系统，如下图所示：系统OK，我们还需要网络，没网络好多操作都用不了。我们可以在系统中的火狐浏览器试着访问任意一个网站看看网络有没有连接成功，如果网站访问成功证...
- 如何在 Linux 中使用 nmcli 命令配置 IP 网络
-
Nmcli（网络管理器命令行界面）是一个命令行实用程序，用于控制配置网络接口的NetworkManager守护程序。使用nmcli实用程序，您可以显示、创建、编辑、启用和禁用网络接口或连接。它...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle忘记用户名密码 (59)
- oracle11gr2安装教程 (55)
- mybatis调用oracle存储过程 (67)
- oracle spool的用法 (57)
- oracle asm 磁盘管理 (67)
- 前端 设计模式 (64)
- 前端面试vue (56)
- linux格式化 (55)
- linux图形界面 (62)
- linux文件压缩 (75)
- Linux设置权限 (53)
- linux服务器配置 (62)
- mysql安装linux (71)
- linux启动命令 (59)
- 查看linux磁盘 (72)
- linux用户组 (74)
- linux多线程 (70)
- linux设备驱动 (53)
- linux自启动 (59)
- linux网络命令 (55)
- linux传文件 (60)
- linux打包文件 (58)
- linux查看数据库 (61)
- linux获取ip (64)
- linux进程通信 (63)