0
点赞
收藏
分享

微信扫一扫

Vue学习笔记之Vue学习前的准备工作


0x00 起步

1.扎实的HTML/CSS/Javascript基本功,这是前置条件。

2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。

另外在这里大家补充点ES6的语法。


0x01 什么是ECMAScript,以及es6的诞生

1997年 ECMAScript 1.0 诞生

1999年12月 ECMAScript 3.0诞生,它 是一个巨大的成功,在业界得到了广泛的支持,它奠定了JS的基本语法,被其后版本完全继承。直到今天,我们一开始学习JS,其实就是在学3.0版的语法

2000年的ECMAScript4.0是当下ES6的前身,但由于这个版本太过激烈,对ES3做了彻底升级,所以暂时被“和谐”了

2009年12月,ECMAScript5.0版正式发布。ECMA专家组预计ECMAScript的第五个版本会在2013年中期到2018年作为主流的开发标准。2011年6月,ES5.1版发布,并且成为ISO国际标准

2013年,ES6草案冻结,不再添加新的功能,新的功能将被放到ES7中;2015年6月,ES6正式通过,成为国际标准

好的,介绍es6的诞生,我们简单来学几个es6的语法,仅仅的只是为了后面咱们vue的课程做课前准备。如果感兴趣的同学可以查看

​​http://es6.ruanyifeng.com/​​


0x02 es6语法:let和const

es6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

Vue学习笔记之Vue学习前的准备工作_块级作用域


上面代码在代码块之中,分别用​​let​​​和​​var​​​声明了两个变量。然后在代码块之外调用这两个变量,结果​​let​​​声明的变量报错,​​var​​​声明的变量返回了正确的值。这表明,​​let​​声明的变量只在它所在的代码块有效

for循环相信大家都玩过。下面这种现象扭曲了我们块级作用域的思想!如果将var改成let就可以了!

Vue学习笔记之Vue学习前的准备工作_ecmascript_02


 再看一个例子:

Vue学习笔记之Vue学习前的准备工作_ecmascript_03

1 var a = [];
2 for (var i = 0; i < 10; i++) {
3 a[i] = function () {
4 console.log(i);
5 };
6 }
7 a[6]();

Vue学习笔记之Vue学习前的准备工作_代码块_04

上面代码中,变量​​i​​​是​​var​​​命令声明的,在全局范围内都有效,所以全局只有一个变量​​i​​​。每一次循环,变量​​i​​​的值都会发生改变,而循环内被赋给数组​​a​​​的函数内部的​​console.log(i)​​​,里面的​​i​​​指向的就是全局的​​i​​​。也就是说,所有数组​​a​​​的成员里面的​​i​​​,指向的都是同一个​​i​​​,导致运行时输出的是最后一轮的​​i​​的值,也就是 10

如果使用​​let​​,声明的变量仅在块级作用域内有效,最后输出的是 6

Vue学习笔记之Vue学习前的准备工作_代码块_05

var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]();

Vue学习笔记之Vue学习前的准备工作_块级作用域_06

上面代码中,变量​​i​​​是​​let​​​声明的,当前的​​i​​​只在本轮循环有效,所以每一次循环的​​i​​​其实都是一个新的变量,所以最后输出的是​​6​​​。你可能会问,如果每一轮循环的变量​​i​​​都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量​​i​​时,就在上一轮循环的基础上进行计算


0x03 不存在变量提升

​var​​​命令会发生”变量提升“现象,即变量可以在声明之前使用,值为​​undefined​​。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,​​let​​命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

Vue学习笔记之Vue学习前的准备工作_代码块_07

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

Vue学习笔记之Vue学习前的准备工作_代码块_08

上面代码中,变量​​foo​​​用​​var​​​命令声明,会发生变量提升,即脚本开始运行时,变量​​foo​​​已经存在了,但是没有值,所以会输出​​undefined​​​。变量​​bar​​​用​​let​​​命令声明,不会发生变量提升。这表示在声明它之前,变量​​bar​​是不存在的,这时如果用到它,就会抛出一个错误。


0x04 不允许重复声明 

​let​​不允许在相同作用域内,重复声明同一个变量。

Vue学习笔记之Vue学习前的准备工作_块级作用域_09

// 报错
function func() {
let a = 10;
var a = 1;
}

// 报错
function func() {
let a = 10;
let a = 1;
}

Vue学习笔记之Vue学习前的准备工作_ecmascript_10

因此,不能在函数内部重新声明参数

Vue学习笔记之Vue学习前的准备工作_ecmascript_11

function func(arg) {
let arg; // 报错
}

function func(arg) {
{
let arg; // 不报错
}
}

Vue学习笔记之Vue学习前的准备工作_块级作用域_12


0x05 为什么需要块级作用域

ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

 第一种场景,内层变量可能会覆盖外层变量。

Vue学习笔记之Vue学习前的准备工作_代码块_13

var tmp = new Date();

function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}
}

f(); // undefined

Vue学习笔记之Vue学习前的准备工作_Vue_14

上面代码的原意是,​​if​​​代码块的外部使用外层的​​tmp​​​变量,内部使用内层的​​tmp​​​变量。但是,函数​​f​​​执行后,输出结果为​​undefined​​​,原因在于变量提升,导致内层的​​tmp​​​变量覆盖了外层的​​tmp​​变量。

第二种场景,用来计数的循环变量泄露为全局变量。

Vue学习笔记之Vue学习前的准备工作_ecmascript_15

var s = 'hello';

for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}

console.log(i); // 5

Vue学习笔记之Vue学习前的准备工作_块级作用域_16

上面代码中,变量​​i​​只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。


const命令

基本语法

​const​​声明一个只读的常量。一旦声明,常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错

​const​​​声明的变量不得改变值,这意味着,​​const​​一旦声明变量,就必须立即初始化,不能留到以后赋值

const foo;
// SyntaxError: Missing initializer in const declaration

上面代码表示,对于​​const​​来说,只声明不赋值,就会报错


​const​​​的作用域与​​let​​命令相同:只在声明所在的块级作用域内有效。

if (true) {
const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined





举报

相关推荐

0 条评论