计算机系统应用教程网站

网站首页 > 技术文章 正文

第1天 | 14天搞定Vue3.0，Vue好在哪?

btikc 2024-12-17 11:34:34 技术文章 19 ℃ 0 评论

如果你见过老陈发布过有关HTML的相关内容，你就会知道，HTML文档是由节点构成的集合。HTML文件节点包括元素节点、文本节点和属性节点。为了让你看清它的庐山真面目，我再次将HTML文件的页面结构发出来，你要仔细观察哦。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0篇</title>
</head>
<body>
<h1>老陈说编程</h1>
<a href="demo1.html">个人简介</a>
</body>
</html>

1.1 HTML是一棵树

观察了HTML页面结构之后，细心的你，有发现什么规律没?如果没有的话，你也太不细心了吧，我在标题上不是告诉你了："HTML是一棵树"了吗?

没错，HTML就是一棵由HTML标签组成的树。树干是<html>标签，树枝是节点，树叶是属性，树花是文本。

1.2 浏览器如何砍树

为了方便浏览器，砍(解析)HTML这棵树， W3C(万维网联盟)定义了访问HTML的DOM标准。DOM(Document Object Model)文档对象模型，定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

JS操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。比如在用户一次操作中，他/她需要更新10个HTML元素(DOM节点)内容时，浏览器在收到第1个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行了10次操作。

在第1次计算完之后，紧接着下一个DOM更新请求时，之前节点的坐标值就变了。那么，进行第2次计算时，之前的操作相当于做了无用功，白白浪费了性能。频繁操作还会出现页面卡顿，影响用户体验的问题。

1.3 在性能优化之后

为了解决DOM访问HTML文件时存在的性能问题，一帮技术牛人就开始琢磨......

在2009年时，经过Misko Hevery等人的努力，终于研究出了一种diff算法，实现了那里需要更新就更新那里的愿望，为了方便分享喜悦，Misko Hevery等人对其进行了扩展、升级、包装并给它取了一个好听的名字：AngularJS。

为了方便、保障AngularJS能更好的用到谷歌产品中，谷歌对其进行了收购。于是，一款有着诸多特性，核心功能的是MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等的优秀前端JS框架，由此诞生了。

1.4 为何有Vue

在Angular流行的那些年，好多程序员都投入了好多精力去学习，也不管Angular的MVC是否全部都能用得上。其实就算知道了，也无可奈何，理由你懂的。

直到2013，就职于Google Creative Lab，名叫尤雨溪的帅哥的出现，程序员用前端JS框架，才发现根本不需要那么累。

尤大大由于个人兴趣，对Angular进行了改造，去掉了Angular MVC中的MV，只留下V(View)的内容。为了方便记忆，将其取名为Vue.js。

Vue.js(读音 /vju?/, 类似于 view)是一套构建用户界面的渐进式框架。Vue核心只关注视图层， 采用自底向上增量开发的设计，目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

Vue从最初的实验阶段(2013年中到2014年2月)，0.x 阶段 (2014年2月到2015年10月)，1.x 阶段 (2015年10月到2016年9月)，2.x阶段(2016年9月至2019年上半年)，到今天的3.x阶段，已经有足足9年多的时间了。

不凭别的，就凭尤大大的坚持，你就应该要学会Vue，特别是开发Web产品需要用到时。就像我现在上班的企业，就开始在用Vue3.0了。

好了，有关Vue3.0的介绍内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##JavaScript##Vue.js##程序员##Web#

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表