Vue.js 原理与开发概要

忘是亡心i 2022-05-19 08:18 232阅读 0赞

Vue.js 是构建 Web 界面的渐进式 JavaScript 框架，通过简洁的 API 提供高效的数据绑定和灵活的组件系统，可用于开发 SPA(单页面应用) 网站。本文概述了 Vue.js 所依赖的 ECMAScript 概念，Vue.js 相比于同类产品的优势，总结了 Vue.js 的开发方法。  
  
**作者：**王克锋  
**出处：**[https://kefeng.wang/2017/02/11/vuejs/][https_kefeng.wang_2017_02_11_vuejs]  
**版权：**[自由转载-非商用-非衍生-保持署名][-_-_-]，转载请标明作者和出处。

## 1.概述 ##

Vue.js 首个版本发布于2014年2月。  
官方文档：[Vue.js 介绍][Vue.js]

### 1.1 功能 ###

*  易用: 已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
 *  灵活: 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
 *  高效: 20kB min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

### 1.2 作者 ###

作者尢雨溪(Evan You)，1988年生，无锡人，高中毕业于上海复旦附中；  
在美国完成大学学业(非计算机专业)，后在Parsons设计学院获得Design & Technology艺术硕士学位，曾任职于纽约Google Creative Lab；  
2016年9月，以技术顾问的身份加入阿里巴巴 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。

### 1.3 同类产品对比 ###

几个最重要的 JavaScript 开源框架：  
[对比其他框架][Link 1]  
[Vue.js Is Good, But Is It Better Than Angular Or React?][Vue.js Is Good_ But Is It Better Than Angular Or React]

#### 1.3.1 Vue.js ####

官网: [http://vuejs.org/][http_vuejs.org]  
项目: [https://github.com/vuejs/vue][https_github.com_vuejs_vue]  
作者尢雨溪(Evan You)，2014年发布，Github 中有 75k 个星(比流行的 jQuery 的 47k 还要多)。  
Vue 是一个全新的框架，几乎没有任何历史包袱。它从 React/Angular 吸取经验和教训，  
以更轻量、灵活、易学的方式提供解决方案，基于组件，能和Bootstrap完美集成。

#### 1.3.2 jQuery ####

官网: [https://jquery.com/][https_jquery.com]  
项目: [https://github.com/jquery/jquery][https_github.com_jquery_jquery]  
作者 John Resig，2006年1月发布，Github 中有 47k 个星。使用MIT许可证授权。  
全球前10,000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript库。  
[Usage of JavaScript libraries for websites][]  
最新版本体积: jquery-1.8.0.js 为 254KB, jquery-1.8.0.min.js 为 91KB。

#### 1.3.3 React.js ####

官网: [https://reactjs.org/][https_reactjs.org]  
项目: [https://github.com/facebook/react][https_github.com_facebook_react]  
来自 Facebook，2013年发布，Github 中有 82k 个星。  
缺点是体积大，语法复杂，不灵活。有把霸王条款。

#### 1.3.4 Angular ####

官网: [https://angular.io/][https_angular.io]  
项目: [https://github.com/angular/angular][https_github.com_angular_angular]  
来自 Google，2009年发布，Github 中有 30k 个星。  
缺点是体积大，语法复杂，不灵活。正在走向没落。

## 2.ECMAScript ##

[JavaScript教程 - 廖雪峰][JavaScript_ -]

### 2.1 与 JavaScript 的关系 ###

1995 年，Netscape 公司开发了 Navigator 浏览器，为了添加动态效果，该公司的 Brendan Eich 设计了 JavaScript 语言。  
1996 年 11 月，Netscape 公司将 JavaScript 提交给国际标准化组织 ECMA，希望这种语言能够成为国际标准。  
1997年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript 1.0 版。  
该标准从一开始就是针对 JavaScript 语言制定的。JavaScript 本身也已经被 Netscape 公司注册为商标。  
ECMAScript 是语言标准，JavaScript 是其实现(当前微软实现了 JScript)。

### 2.2 ECMAScript 版本号 ###

*  ECMAScript 1.0: 1997年；
 *  ECMAScript 2.0: 1998 年 6 月；
 *  ECMAScript 3.0: 1999 年 12 月，成为通行标准，奠定了 JavaScript 语言的基本语法，以后的版本完全继承；
 *  ECMAScript 4.0: 太过激进，流产未发布；
 *  ECMAScript 5.0: 2009 年 12 月；
 *  ECMAScript 5.1: 2011 年 6 月，并且成为 ISO 国际标准；
 *  ECMAScript 6.0(ES6): 2015 年 6 月发布，成为国际标准，其目标是使得 JavaScript 语言成为企业级开发语言，规定每年6月份发布一个新版本，有年份作为版本。
 *  ECMAScript 2015(ES2015): 2015 年 6 月发布，是 ES6 的首个版本；
 *  ECMAScript 2016(ES2016): 2016 年 6 月发布；
 *  ECMAScript 2017(ES2017): 2017 年 6 月发布。

### 2.3 官方文档 ###

Mozilla 官网文档：[JavaScript 参考文档][JavaScript]、[String][]

比如 [String.startsWith()][String.startsWith] / [String.endsWith()][String.endsWith] / [模板字符串][Link 2] 就被标明是 ES2015 的标准。  
特定版本的浏览器发布时，实现了当时的某个 ECMAScript 版本，所以如果使用 JavaScript 新规划接口，那就会造成不兼容。

### 2.4 浏览器之争 ###

在Netscape设计出JavaScript后的短短几个月，JavaScript事实上已经是前端开发的唯一标准。  
微软通过 Windows 中捆绑 IE，击败了 Netscape，微软认为IE6浏览器已经非常完善，几乎没有可改进之处，然后解散了IE6开发团队！  
而Google却认为支持现代Web应用的新一代浏览器才刚刚起步，尤其是浏览器负责运行JavaScript的引擎性能还可提升10倍。  
先是Mozilla借助已壮烈牺牲的Netscape遗产在2002年推出了Firefox浏览器，  
紧接着Apple于2003年在开源的KHTML浏览器的基础上推出了WebKit内核的Safari浏览器，不过仅限于Mac平台。  
随后，Google也开始创建自家的浏览器。他们也看中了WebKit内核，于是基于WebKit内核推出了Chrome浏览器，是跨Windows和Mac平台的。  
并且，Google认为要运行现代Web应用，浏览器必须有一个性能非常强劲的JavaScript引擎，于是Google自己开发了一个高性能JavaScript引擎，名字叫V8，以BSD许可证开源。  
支持HTML5的WebKit已经成为手机端的标准了，IE浏览器从此与主流移动端设备绝缘。

### 2.5 Node.js ###

很多语言虽然同时提供了同步IO和异步IO，但是开发人员一旦用了同步IO，他们就再也懒得写异步IO了，  
但 JavaScript 则不然，因为 JavaScript 是单线程执行，不能进行同步IO操作，只能使用异步IO。  
2009年，Ryan Dahl 正式推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为Node.js。  
Node第一次把JavaScript带入到后端服务器开发，加上世界上已经有无数的JavaScript开发人员，所以Node一下子就火了起来。

“Node上运行的JavaScript”相比“其他后端开发语言”有何优势？  
最大的优势是借助JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举。  
通过模块化的JavaScript代码，加上函数式编程，并且无需考虑浏览器兼容性问题，直接使用最新的ECMAScript 6标准，可以完全满足工程上的需求。

## 3.开发准备 ##

你可以查看安装教程来了解其他安装 Vue 的选项。  
请注意我们不推荐新手直接使用 vue-cli，尤其是对 Node.js 构建工具不够了解的同学。  
[Vue.js 安装][Vue.js 1]

### 3.1 浏览器要求 ###

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。

### 3.2 引入 ###

在开发时请用开发版本，遇到常见错误它会给出友好的警告。  
开发版本: [https://vuejs.org/js/vue.js][https_vuejs.org_js_vue.js]  
生产版本: [https://vuejs.org/js/vue.min.js][https_vuejs.org_js_vue.min.js]  
[https://cdn.jsdelivr.net/npm/vue][https_cdn.jsdelivr.net_npm_vue]

### 3.3 [Vue Devtools][] ###

当使用 Vue 时，我们推荐同时在你的浏览器上安装 Vue Devtools，它允许你在一个更加友善的界面中审查和调试你的 Vue 应用。

## 4.基本功能 ##

### 4.1 基本用法 ###

<!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="vue.js"></script>
        <title>Vue.js 基本用法</title>
    </head>
    
    <body>
    
    <div id="app" v-if="success">
        <ul>
            <li v-for="person in persons">#{
       {person.id}}: {
       {person.name}}</li>
        </ul>
        <input v-model="name"/> 将要新增“{
       {name}}”<br/>
        <button v-bind:title="button" v-on:click="submit">{
       {button}}</button>
    </div>
    
    <script type="text/javascript"></script>
    
    </body>
    </html>

### 4.2.组件化构建 ###

先构造出小型、独立和通常可复用的组件，再使用组件构建大型应用。  
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

<div id="appx">
      <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
        </todo-item>
      </ol>
    </div>
    
    <script type="text/javascript"></script>

[https_kefeng.wang_2017_02_11_vuejs]: https://kefeng.wang/2017/02/11/vuejs/
[-_-_-]: https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh
[Vue.js]: https://cn.vuejs.org/v2/guide/
[Link 1]: https://cn.vuejs.org/v2/guide/comparison.html
[Vue.js Is Good_ But Is It Better Than Angular Or React]: https://www.valuecoders.com/blog/technology-and-apps/vue-js-comparison-angular-react/
[http_vuejs.org]: http://vuejs.org/
[https_github.com_vuejs_vue]: https://github.com/vuejs/vue
[https_jquery.com]: https://jquery.com/
[https_github.com_jquery_jquery]: https://github.com/jquery/jquery
[Usage of JavaScript libraries for websites]: https://w3techs.com/technologies/overview/javascript_library/all
[https_reactjs.org]: https://reactjs.org/
[https_github.com_facebook_react]: https://github.com/facebook/react
[https_angular.io]: https://angular.io/
[https_github.com_angular_angular]: https://github.com/angular/angular
[JavaScript_ -]: https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
[JavaScript]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference
[String]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
[String.startsWith]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
[String.endsWith]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
[Vue.js 1]: https://cn.vuejs.org/v2/guide/installation.html
[https_vuejs.org_js_vue.js]: https://vuejs.org/js/vue.js
[https_vuejs.org_js_vue.min.js]: https://vuejs.org/js/vue.min.js
[https_cdn.jsdelivr.net_npm_vue]: https://cdn.jsdelivr.net/npm/vue
[Vue Devtools]: https://github.com/vuejs/vue-devtools#vue-devtools