vue 字符串拼接_Vue 中必会的 ES6 知识点

let / const

在 let 和 const 出现之前，js 中定义变量的关键字只有 var，不过 var 有一个缺点，没有块级作用域。

比如下面这段代码：

我们运行一下，控制台的输出结果会是这样：

我们可以看到，在 for 循环中定义的变量 i，我们在循环体之外还能访问，这个特性是我们不想看到的。

我们用 let 定义变量来试试：

再次运行一下，我们看看控制台输出了啥：

我们可以看到，这次我们在 for 语句之外访问 i 变量就抛出了错误——i is not defined。

再说说 const。

首先，const 定义的变量和 let 一样，都是有块级作用域的。

其次，const 用于定义常量，用 const 定义的变量不允许之后再修改了。

举个例子：

运行下代码：

可以看到，我们试图修改 const 定义的变量时，js 抛出了错误。

总之记住一句话：最佳实践是默认使用 const,只在确实需要改变变量的值时使用 let。

解构赋值可以方便的从数组或者对象中取数据，我们看个例子：

没有解构赋值之前，我们想要从一个对象中取出属性，只能像上面这样写。

我们再来看看解构赋值的写法：

这就是解构赋值的魅力！上面是利用解构赋值从对象中取数据，我们再来看看在数组上的应用：

箭头函数也算是vue中用的非常多的一个ES6知识点了，有以下一些写法：

箭头函数除了写法比较简洁之外，最大的好处还是箭头函数内部的 this 永远指向的是定义时所在的对象，这使得我们不用定义额外的变量来保存 this。看一个 this 结合 Promise 的例子：

ES5写法

ES6写法

两者一对比，是不是发现ES6的写法简洁了很多呢？

模板字符串是vue中使用非常频繁的一个操作了，用来替代非常容易出错的字符串拼接操作：

可以看到，相比于字符串拼接的方式，模板字符串的可读性大大的提高了。

在vue中，我们经常使用字符串模板，来给元素设置动态属性值：

async/ await 可以说是 js 中异步编程的终极解决方案了。

在 vue 的日常开发过程中，我们经常需要在 mounted 生命周期中获取服务器数据，现在写起来最舒服的方式就是 try / catch + async / await 的写法了。这种写法写起来像同步的写法，并且错误处理写起来也很直观：

模块化机制能让我们将方便的将代码拆分为独立的模块，模块通过 export 暴露对外的接口，通过 import 语句引用其他模块的代码。

这在vue中非常常用，vue的单文件写法就依赖ES6的模块导入导出机制：

通过ES6的模块导入导出机制，我们可以在一个.vue单文件，定义好关于一个vue组件的一切。