《深入浅出Vue.js》-Day-01:元编程概念+Vue解决问题的思路+什么渐进式框架

536 阅读9分钟

1、序言一

—— 月影

元编程(metaprogramming)

元编程,简单的理解, 是指框架的作者使用一种编程语言固有的语言特性,创造出相对新的语言特性, 使得最终使用者能够以新的语法和语义来构建他们的应用程序,从而在默写领域开发中获得更好的开发体验。

通过学习Vue.js,可以让我们掌握设计应用程序框架的一般性技巧,还阔以在实现应用程序时运用其中的具体设计思想和方法论。

能够透过Vue.js的设计思路去学习元编程思想,并将这种思想运用于程序开发中。

2、序言二

——李松峰(JavaScript高级程序设计的翻译者)

本书作者,李博文写书的初衷是将自己研究Vue.js源码的心得分享给大家。了解了了这本书是侧重Vuejs源代码分析的。

如果想读懂这本书,读者不仅要有一些Vue.js的实际使用经验,而且还要有一些编译原理(比如AST)相关的知识储备,这样才能更轻松地理解模板解析、优化与代码生成的原理。

读完到上面这句话,思考了下,自己就是妥妥的拥有VueJs实际使用经验,但是把对编译原理AST是之前了解过一些些,主要还是看拉勾教育的哪个课程来着。

随着越来越多“聪明又勤奋”的人加入前端行列,能否洞悉前沿框架的设计和实现将会成为高级人才与普通人才的“分水岭”。

好的,我要洞悉前端框架的设计和实现,更进一步的成为高级人才!

3、前言

我希望大家拿出一部分精力去关注框架所解决的问题以及它是如何解决这些问题的。这有助于我们提升自己的技术和解决问题的能力。

本书的目的:

所有技术解决方案的终极目标都是在解决问题,都是先有问题,然后有解决方案。解决方案可能并不完美,也可能有很多种。

了解Vue.js解决问题的思路:

  • 它解决了什么问题?
  • 它是如何解决的?
  • 解决问题的同时又都做了哪些权衡和取舍?

如何透过现象看到Vue.js的本质?学习到:

  • Vue.js的响应式原理,理解为什么修改数据视图会自动更新;
  • 虚拟DOM(Virtual DOM) 的概念和原理;
  • 模板编译原理,理解Vue.js的模板是如何生效的;
  • Vue.js整体架构设计与项目结构;
  • 深入理解Vue.js的生命周期,不同的生命周期钩子之间有什么区别,不同的生命周期之间Vue.js内部到底发生了什么;
  • Vue.js提供的各种API的内部实现原理;
  • 指令的实现原理;
  • 过滤器的实现原理;
  • 使用Vue.js开发项目的最佳实践。

组织结构

一共四章,每章节从不同角度方位去讲解Vue.js的内部原理。

《深入浅出Vue.js》的issue地址:github.com/berwin/Blog…

4、第一章:Vue.js简介

当应用程序开始变复杂后,我们需要频繁操作DOM。由于缺乏正规的组织形式,我们的代码变得非常难以维护。

这本质上是命令式操作DOM的问题,我们曾经用jQuery操作DOM写需求,但是当应用程序变复杂后,代码就像一坨意大利面一样,有点难以维护。我们无法继续使用命令式操作DOM,所以Vue.js提供了声明式操作DOM的能力来解决这个问题。

4.1 什么是Vue.js

Vue.js,简称Vue,是一款友好的, 多用途且高性能的JavaScript框架,能够帮助我们创建可维护性和可测试性更强的代码。


它是一款渐进式的JavaScript框架

emmm,Vue是一款渐进式的JavaScript框架,联想到之前水群看到一个同学说,面试的时候, 被问到Vue的官网首页写的是什么,然后哪个同学说吐槽,这个问题怎么有这样问的,hhh,结果面试官回答的是:Vue是一款渐进式的JavaScript框架。(如下图所示)

4.1.1 什么是渐进式?

Vue官网:

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

渐进式指的可以由浅入深的,由简单到困难的一种方式。

渐进式的含义:没有多做职责之外的事,只做了自己该做的事,没有做不该做的事,仅此而已。

换句话说,就是Vue你可以用你想用或者能用的功能特性, 不想用的部分可以不实用。 Vue不强求你使用的时候一次性接受并使用它的全部功能特性。

本书作者给出的举例是:

案例一:如果你已经有一个现成的服务端应用, 也就是非单页面应用,可以将Vue.js作为该应用的一部分嵌入其中,可以带来更加丰富的交互体验。

看到这句话,想到自己之前做的国际站的PC项目,就是一个现成.net的服务端应用。首页和公共部分用的是最早的jquery方式,页面主结构写在服务端.chtml中, 然后通过写比较原始的javascript的脚本js和css文件来实现这个页面。

而转到火车票项目页面的时候, 就可以看到是一个Vue搭建的项目页面, 最终也是生产js和css文件,嵌入到.net应用中, 但是相对首页和公共部分的项目的原生js代码项目,就有了更多一些的优势。 毕竟现在习惯使用各大框架项目之后,再去维护那些比较老旧的原生项目的时候,就会觉得很头疼。

案例二:如果希望将更多业务逻辑放到前端来实现, 那么vue.js的核心库及其生态系统也可以满足你的各种需求。

纯前后端分离的项目, 目前大多数使用的是这个。

4.1.2 和Angular对比


angular的两个版本都是强主张,如果你用它,则必须接受以下的东西:

  • 必须使用它的模块机制
  • 必须使用它的依赖注入
  • 必须使用它的特殊形式定义组件

所以Angular是带有比较强的排它性,如果应用不是从头开始, 而是要不断考虑是否跟其他东西集成,这些主张就会带来一些困扰。

4.1.3 和React对比

React 主张主要是函数式编程的理念,例如:你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为它是软性侵入。

React也有视图层,但几乎没有人这么用。

从业务角度上看,业务系统里面的实体关系,如何组织业务逻辑,几十年来积累了无数的基于设计模式的场景经验,有太多的东西可以模仿,但是,没有人给你总结那么多如何把你的厚重业务映射到函数式理念的经验,而React完全是函数式编程。

4.2 Vue.js简史

4.2.1 大事件

  • 2013年7月28日,尤大在GitHub上第一次为Vue.js提交代码。当时叫Element,后来更名为Seed.js
  • 2013年12月7日,尤大在GitHub上发布了新版本0.6.0,并将项目正式改名为Vue.js,且把默认的指令前最变更为v-。 代表Vue.js正式问世。
  • 2014年2月1日。尤大将Vue.js 0.8发布在了国外的Hacker News网站,代表它的首次公开发布。
  • 2015年10月26日,Vue.js迎来了1.0.0版本的发布。
  • 2016年10月1日,这一天是祖国的生日,但同时也是Vue.js 2.0发布的日子。Vue.js 2.0的代号叫攻壳机动队(Ghost in the Shell)。

直到2015年10月26日这天,Vue.js终于迎来了1.0.0版本的发布。
并且为1.0.0这个版本配备了一个代号,叫新世纪福音战士(Evangelion),这是一部动画片的名字。事实上,Vue.js每一次比较大的版本发布,都会配一个动画片的名称作为代号。

hhh这个历史我还真不很了解。!!!每个比较大的版本发布,都会配一个动画片的名称作为代号。我忽然想到《葫芦娃》!

在开发Vue.js的整个过程中,它的定位发生了变化,一开始的定位是:“Just a view layer library”就是说,最早的Vue.js只做视图层,没有路由,没有状态管理,也没有官方的构建工具,只有一个库,放在网页里就直接用。

后来,他发现Vue.js无法用在一些大型应用上,这样在开发不同大小的应用时,需要不停地切换框架以及思维模式。尤雨溪希望有一个方案,有足够的灵活性,能够适应不同大小的应用需求。所以,Vue.js就慢慢开始加入了一些官方的辅助工具,比如路由(Router)状态管理方案(Vuex)和构建工具(vue-cli) 等。

加入这些工具时,Vue.js始终维持着一个理念:“这个框架应该是渐进式的。”这时Vue.js的定位是:The Progressive Framework

4.2.2 渐进式框架:

所谓的渐进式框架, 就是把框架分层。

4.2.3 框架分层

所谓分层,就是说你既可以只用最核心的视图层渲染功能来快速开发一些需求,也可以使用一整套全家桶来开发大型应用。Vue.js有足够的灵活性来适应不同的需求,所以你可以根据自己的需求选择不同的层级。

Vue.js 2.0与Vue.js 1.0之间内部变化非常大,整个渲染层都重写了,但API层面的变化却很小。

Vue.js 2.0引入了虚拟DOM,其渲染过程变得更快了。

Vue.js 2.0还提供了很多令人激动的特性,比如支持JSX和TypeScript,支持流式服务端渲染,提供了跨平台的能力等。

书本是:2018年6月29日写的。 现在已经是Vue3了。 虽然也买了《Vue设计与实现》,还是先想把Vue2的搞清楚, 大概知道一个历史了解清楚了Vue2,再继续深入研究Vue3,就能知道他们的设计差异在哪里,有什么更好的点值得我们学习的。

5、引用