初识vue 3

最新推荐文章于 2024-06-06 09:55:15 发布

小小前进的我

最新推荐文章于 2024-06-06 09:55:15 发布

阅读量1.4k

点赞数 47

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52325528/article/details/135636275

版权

一、前端发展史

1.1 原始时代

早期网站开发没有“前端工程师”这个职业。开发人员负责全部的网站开发。通过ASP、JSP、PHP等语言的模版技术，直接在静态页面内调用方法，对数据进行增删改查操作。被戏称“套模板”。

缺点：在浏览器中切换页面时，页面被刷新，加上业务迭代带来的工作量增加，一个复杂的界面，少则几百行，多则上千行，让后期的业务迭代和维护陷入困境。

1.2 Ajax时代

2004年Ajax是一种在无需重新刷新页面的情况下，能更新页面部分区域的技术。使前端工程师的工作发生了质的变化，之前只需要按照设计稿实现页面布局，并添加交互动效就可以交给后端开发人员去套模板。有了Ajax后实现了前后端分离，后端开发者的任务是抛出API接口，前端工程师通过Ajax调用接口，实现数据的增删改查。

缺点：在使用原生的JavaScript的情况下，随着代码量的增加，前端工程师在大型项目的代码结构把控上力不从心。这时大量二次封装JavaScript语言的工具库应运而生。

2006年jQuery发布。优势如下：

1.原生DOM操纵

jQuery封装了原生的JavaScript的API，在使用过程中对开发者十分友好。

2.浏览器兼容

为开发者做好了兼容策略，几乎涵盖了市面上所有的浏览器，包括让开发者头痛的IE浏览器。

3.生态强大

好用的插件多。

4.版本更新及时

1.3 MVC时代

为了更好的管理数据和视图之间的关系，第一个MVC框架Backbone.js诞生服务端的MVC模式被搬到了前端。

M即Model，数据模型，主要负责与数据的相关任务，包括对数据的增删改查操作。

V即View，视图，用户可是界面。

C即Controller，控制器，负责监听视图中触发的用户事件，从而操作Model层，再将数据显示到View层。

MVC模式的优点：

1.低耦合

视图层和业务层分离，修改视图层代码不在牵扯业务层的逻辑

2.高复用

多个视图可公用一个模型，不用重复地写同样的业务逻辑大大提高工作效率

MVC模式的缺点：

1.定义不明确

MVC只是一个概念，没有明确定义开发的形式，各大厂商的MVC模式可能不同，不能通用

2.杀鸡用牛刀

在多数情况下，中小型项目注重的是快速迭代，业务更新速率极高，而MVC模式对与处理大量的业务需求变动有些捉襟见肘。

最终，MVC模式还没站位脚跟就被淘汰。

1.4 模块化时代

模块化时代的到来，让前端开发进入到了一个高速发展的时代

先说Node.js带来的CommonJS模块规范化，有如下几个概念：

1.每个文件都是一个模块，他们都有属于自己的作用域，内部定义的变量、函数都是私有的，对外不可见。

2.每个模块内部的module变量代表当前模块，是一个对象。

3.module对象的exports属性是对外的接口，加载某个模块其实就是加载模块的module.exports属性。

4.使用return关键字加载模块，require的基本功能是导入并执行一个JavaScript文件，并返回expoorts值。

这里笔者用代码解释CommonJS。

module.exports = {
    //根据id，修改对应DOM节点的显示
    show: function (id){
        if(id){
            doucument.getElementById(id).setAttribute('style','display:block');
        }
    },
    //根据id，修改对应DOM节点的隐藏
    hide: function (id){
        if(id){
           doucument.getElementById(id).setAttribute('style','display:none'); 
        }
    }

}
//可导出单个方法
module.exports.show=function(id){
    if(id){
        doucument.getElementById(id).setAttribute('style','display:block');
    }
}
//引入utils.js
const utils=require('./utils.js');
//使用他
utils.show('root');

除了CommonJS模块规范外，还有以require.js为代表的AMD规范和玉伯团队开发的以sea.js为代表的CMD。

AMD的特点是异步加载模块，但前提是初始化需要将所有的依赖项加载完毕。CMD的特点是依赖延长，也是开发者所说按需加载。

显然CMD的按需加载功能对开发者更有吸引力。在AMD模式下，初始化阶段就加载所有资源，会给首屏渲染带来一定压力。而CMD的按需加载减少了首屏渲染的资源数量，加快了首屏加载的速度。

当然这些技术如今开来已过时了，ES6的出现让前端开发杨帆启航。

1.5 ES6时代

历史上，JavaScript这门弱类型语言一直没有自己的模块体系，自身无法实现文件的拆分和组合。当然，强行才分JavaScript脚本也能实现简单的模块化开发，只会“污染”全局变量，造成一些不可控的局面。

在ES6出现之前，想要比较规范地管理业务模块，就要借助上述提到的require.js和sea.js。ES6的出现，为前端开发带来了ES模块化规范，相当于给JavaScript加上一层强大的Buff，使它从早期的表单验证脚本语言摇身一变，成为一门面向对象语言。

和CommonJS规范类似，ES模块化规范把脚本文件当做一个模块，每个模块都有自己独立的作用域，不必担心“污染”全局变量问题。ES6的模块化采用导入（Import）和导出（Export），并且自动采用严格模式（Use Strict）。

使用ES模块化规范，实现上面CommonJS模块化的代码

//utils.js
const show = (id) => {
    if(id) {
        document.getElementById(id).setAttribute('style','display:block');
    }
}
const hide = (id) => {
    if(id) {
        document.getElementById(id).setAttribute('style','display:none');
    }
}
export {
        show,
    hide
}

//外部引入utils.js脚本
import {show,hide} from './utils.js'

目前并不是所有的浏览器都支持ES模块化规范，比如IE、Opera Mobile、UC、Baidu等浏览器的较低版本或全部版本都不支持ES6的模块化开发。所以，在开发阶段可以使用ES6，但在部署上线之前，需要通过babel将ES6+的代码转化为ES5的代码，从而去适配一些低版本的浏览器环境。

1.6 SPA时代

SPA(Single Page Web Application)即单页Web应用。简单理解就是由一个页面构成的网址，HTML标签都是通过JavaScript脚本动态生成的，并且插入到页面的一个根节点。通过路由跳转页面，但不会刷新页面，只是将网页内部的DOM节点替换了而已。采用SPA模式开发的网页，与服务器端只是数据上的交互不在请求服务器端的其他网址。

网页交互示意图

-----------初始化请求---------->

客户端 <----------返回HTML------------ 服务器

------------Ajax 请求----------->

<--------返回JSON数据------->

用代码描述，大致如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>SPA</title>
</head>
<body>
    <div id="root"></div>
    <script src='./app.js'></script>
</body>
</html>

以上代码中id为root的标签就是上述提到的根节点，网页中的所有的页面效果、数据交互都在app.js脚本文件中。而脚本做的第一件事情就是找到根节点，并通过JavaScript将页面渲染到根节点下，包括后续的页面的跳转，都只在这一个页面中进行，这就是SPA。

现在前端开发最流行的SPA框架莫过于react、Vue、Angular等。他们都采用ES6的模块化方式编写代码，用组件化开发的方式完成业务需求。通过Webpack等现代化打包工具，完成代码的自动化打包，最后部署上线。

单页面内开发框架的出现大幅地提升了用户浏览页面的体验。DOM操作都是在JavaScript内部完成的，不在向以前一样直接去操作DOM。单页面开发框架将原生APP的那套模式运用到了网页开发中来。以往的网页跳转页面都会导致浏览器中的网页刷新，而在单页面开发中，浏览器地址栏只负责变化地址，视图的更新全权交由JavaScript来完成。每个页面相当于一个组件，每个组件都有自己的生命周期，在切换组件的时候，会顺序地执行相应的生命周期，在相应的生命周期中，通过调用服务器端提供的API接口获取数据，并进行视图渲染。

1.7 小程序时代

2016年小程序的出现给前端开发带来了新的活力。各大厂商效仿微信，推出了自己的小程序应用。各大厂商的小程序应用给前端开发人员造成一定的困扰，一个业务可能需要完成多套代码去适配各个大厂商的小程序应用。

针对上述问题，React提出的虚拟DOM技术为后来的“一套代码多端使用”成为可能。在虚拟DOM的基础上，通过复杂的操作将React、Vue转换为各个技术栈需要的代码形式，比如转换为APP、小程序等代码形式，目前市面上这项技术做的比较好的有uni-app、taro。

1.8 低代码（LowCode）时代

低代码开发是一种可视化应用开发方法，即以可视化拖曳组件完成简单应用的开发工作。通过低代码开发，不同水平的开发人员能够通过图形用户界面，使用拖放式组件和模型驱动逻辑创建Web和移动应用。低代码开发减轻了非技术开发人员的压力，帮其免去了代码编写工作，同时也为专业开发人员提供了支持，帮助他们完成应用开发过程中繁琐的底层架构与基础设施任务。
业务和IT部门的开发人员可以在平台中协同，一起创建、迭代和发布应用，而所需时间只是传统方法所需时间的一小部分。这种低代码应用开发方法可针对不同用例开发各种类型的应用。
现在市面上有非常多的大厂在尝试投入研发资源，将低代码平台落地。从上述一系列前端技术的发展可以看出，前端工程师是一个技术迭代周期很短的职业，如果想成为前端工程师，就要保持不断拥抱变化的心态，不断地学习日新月异的技术，并且尝试在自己擅长的一个前端小领域内深耕，比如小程序、可视化、工程化工具、低代码、组件库等。

二、认识Vue.js

2013年，就职与Google的尤雨溪受到Angular的启发，结合自己的想法，开发出一款名为Seed的轻量级框架。

2013年12月，该框架更名为Vue，版本号为0.6。

2014年1月24日，Vue正式对外发布，版本号为0.8。

2014年2月25日，Vue有了自己的代号——Animatrix来自动漫版（黑客帝国），版本号为0.9。

2015年6月13日，Vue代号——Dragon Ball（龙珠），这时Vue已经被前段大多数开发人员所熟知。

Vue1.0版本的代号是Evangelion（新福岛福音战士）。这个版本是Vue历史上的第一个里程碑，同年，Vue-Router、Vuex、Vue-CLI相继发布，这意味着Vue从一个视图库层发展成为一个渐进式框架。

Vue2.0版本的代号为Ghost in the Shell（攻壳机动队），它是Vue历史上的第二个里程碑。该版本吸取了React提出的Virtual DOM概念，并且开发出服务器端渲染的功能。在为框架提高效率的同时，也为用户提供更多业务场景的使用方法。与此同时，组件化开发思想深入人心。大量与Vue相关的UI组件库如雨后春笋相继发布，如Vant、ElementUI、Ant Design of Vue、Vuetify、iView等。

2020年9月19日发布的Vue3.0版本你的代号为One Piece（海贼王动漫）,引进了全新的Component API，并且兼容Options API开发模式、在性能上，与Vue2相比，Vue3的包更小（使用Tree-Shaking时可减少41%），初始渲染速度提升55%，更新速度提升133%，内存使用率降低54%。单从性能方面来说，用户会毫不犹豫地升级为Vue3。

和Vue3一同问世的还有Vite，官方称它为下一代前端开发与构建工具，简单来说，它是类似于Vue-CLI的存着，但是不同的是，Vite利用的是原生ESM能力，开发环境下不构建代码。