vue学习起步：了解下

Posted 2021-02-07 yaoyao-sun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue学习起步：了解下相关的知识，希望对你有一定的参考价值。

渐进式

有这么一句话，vue是渐进式框架。

抽取“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？中的解释：

渐进式代表的含义是：主张（主张指使用时的硬性要求）最少。来个对比就知道什么叫主张最少：

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制
必须使用它的依赖注入
必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

而使用vue使用，你可以只用它的一部分，不是说你必须一竿子把所有的东西都用上。你可以在原有大系统的上面，把一两个组件改用它实现，把它当jQuery用；也可以整个用它全家桶开发，把它当Angular用；
还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念。也可以函数式，都可以。

脚手架概念

在生活中含义是为了保证各施工过程顺利进行而搭设的工作平台，因此作为一个工作平台，前端的脚手架可以理解为能够帮助我们快速构建前端项目的一个工具或者平台。目前很多主流的前端框架都提供了各自官方的脚手架工具，以帮助开发者快速构建起自己的项目，比如 Vue、React 等， Vue 的脚手架工具 vue-cli。

文件路径写法

以 / 为起始，表示从根目录开始解析；
以 ./ 为起始，表示从当前目录开始解析；
以 ../ 为起始，表示从上级目录开始解析；

以@开头的文件路径：

@/这是webpack设置的路径别名，resolve里面有一个alias的配置项目，能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库,我们最好可以直接指定它们的位置，这样方便我们查找。
该文件在目录build/webpack.base.conf这个文件里面。该项配置具体讲解参考：resolve.alias

resolve: {
    // 路径别名
    alias: {
        ‘@‘: resolve(‘src‘),
        ‘vue$‘: ‘vue/dist/vue.esm.js‘
    }
}

运行和编译的概念

编译包括编译和链接两个过程。

编译过程就是把源代码翻译成机器能识别的代码或者某个中间状态的语言.比如java只有JVM识别的字节码,C#中只有CLR能识别的MSIL。还简单的作一些比如检查有没有粗心写错啥关键字了啊.有啥词法分析,语法分析之类的过程。

链接，是把编译生成的二进制文件，组合成为一个系统可以执行的可执行文件。

所谓运行时就是把编译出来的可执行文件代码在系统中运行的过程，被此时被装载到内存中去了.(代码保存在磁盘上没装入内存之前是个死家伙.只有跑到内存中才变成活的).而运行时类型检查就与前面讲的编译时类型检查(或者静态类型检查)不一样.不是简单的扫描代码.而是在内存中做些操作,做些判断.

es6常用语法

vue里用到了一些es6的语法，比如在一个模块对外提供接口时：

const getName = () => person.name;
const getAge = () => person.age;

// commonJS的方式
module.exports = { getName, getAge }

// ES6 modules的方式
export default { getName, getAge  }

进阶：前端基础进阶系列

AMD、CMD、Common规范

CommonJS

为在浏览器环境之外构建JavaScript生态系统而产生的项目，比如服务器和桌面环境中。

一个单独的文件就是一个模块

每一个模块都是一个单独的作用域，在一个文件中定义的变量，都是私有的，对其他文件是不可见的，所有代码都运行在模块作用域。如果想在多个文件分享变量，必须定义为global对象的属性。（不推荐）

模块可以多次加载，但只会在第一次加载的时候运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果；

模块通过exports或者 module.exports导出对外的变量或接口，通过require()同步加载依赖，导出API输出到当前模块。

定义模块

在每个模块内部，module变量代表当前模块。它的exports属性是对外的接口，其指向module.exports，

相当于在模块头部加了这句话：var exports = module.exports，在对外输出时，可以给exports对象添加方法

PS：不能直接赋值（因为这样就切断了exports和module.exports的联系）

其他文件加载该模块，实际上就是读取module.exports变量。

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

加载模块

require方法：读取并执行一个JS文件（后缀名默认为.js），然后返回该模块的exports对象，如果没有发现指定模块会报错。

模块加载的顺序：按照其在代码中出现的顺序，所以只有加载完成才能执行后面的操作,多个模块不能并行加载。

var app = require(‘./app.js‘);

根据参数的不同格式，require命令去不同路径寻找模块文件。

如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。
如果参数字符串以“./”开头，则表示加载的是一个位于相对路径的模块文件
如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（node核心模块，或者通过全局安装或局部安装在node_modules目录中的模块）

__dirname代表当前模块文件所在的文件夹路径，__filename代表当前模块文件所在的文件夹路径+文件名

入口文件

一般都会有一个主文件（入口文件），在index.html中加载这个入口文件，然后在这个入口文件中加载其他文件。

可以通过在package.json中配置main字段来指定入口文件。

模块缓存

第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。

加载机制

CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

服务器端的Node.js遵循CommonJS规范，Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。

AMD和CMD以及ES6

但如果是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。所以就有了 AMD 、CMD 的解决方案，AMD与CMD都借鉴了CommonJs

AMD：Asynchronous Module Definition，异步模块加载。它完整描述了模块的定义，依赖关系，引用关系以及加载机制。AMD 里，require 分全局 require 和局部 require，都叫 require。

CMD：Common Module Definition 通用模块定义，提供模块定义及按需执行模块。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动

优劣：

运行策略：

AMD:

define([‘./a‘, ‘./b‘], function(a, b) { //运行至此，a.js和b.js文件已下载完成 a模块和b模块已执行完，直接可用；
    a.doing();
    // 此处省略500行代码
    b.doing();
});

CMD:

define(function(require, exports, module) {
     var a = require("./a"); //等待a.js下载、执行完
     a.doing();
     // 此处省略500行代码
     var b = require("./b"); //依赖就近书写
     b.doing();
});