Vue基础教程（14）ECMAScript 6语法介绍及其前世今生：咖啡加糖，Vue加ES6：这波语法糖让你编码甜到齁！

最新推荐文章于 2025-11-24 03:21:24 发布

原创最新推荐文章于 2025-11-24 03:21:24 发布 · 430 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#ecmascript #vue.js #es6

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

还记得jQuery统治前端江湖的年代吗？那时写个点击事件都得裹上三层function，变量满天飞，代码缩进能逼死强迫症。直到2015年ES6横空出世，JavaScript终于从“青春期叛逆”进化到“成熟稳重精英范儿”。而Vue.js就像个会读心的管家，立马把ES6的语法糖全倒进了开发者的咖啡杯——来来来，尝尝这甜度是否超标？

一、ES6前世今生：从“拖拉机”到“超跑”的逆袭

1.1 远古时代：var的迷惑行为大赏
ES5时代用var声明变量，堪比玩扫雷：变量提升（hoisting）让你随时踩坑。比如：

console.log(hero); // 输出undefined而不是报错！
var hero = "Vue";

这波操作相当于你先宣布“我要喝咖啡”，然后才磨豆子——机器不报错，但人懵了。

1.2 ES6救赎：let/const的底线思维
ES6引入let和const后，变量声明终于有了“纪律性”。试着把上面代码的var换成let，直接报错：ReferenceError！这就好比超市排队，var是随便插队的大妈，let/const则是拉起的隔离带——规矩！

1.3 为什么Vue和ES6是天作之合？
Vue的响应式系统天生爱干净——它需要明确追踪数据变化。用let和const声明变量，就像给数据贴了条形码，Vue的扫描枪（依赖追踪）一扫一个准。反观var，活像农贸市场的手写标签，Vue得猜半天。

二、Vue+ES6语法糖尝鲜：甜到漏糖的实操现场

2.1 箭头函数：拯救this混乱综合征
以前在Vue方法里写回调，总得祭出const _this = this这样的黑魔法：

// ES5心酸史
data() {
  return { count: 0 }
},
methods: {
  addCount: function() {
    var _this = this;
    setTimeout(function() {
      _this.count++; // 不保存this的话，this就指向window了！
    }, 1000)
  }
}

ES6的箭头函数直接让this“继承家业”：

// ES6真香版
methods: {
  addCount() {
    setTimeout(() => {
      this.count++; // 箭头函数内部的this自动指向外层Vue实例！
    }, 1000)
  }
}

注意：Vue的选项（如data、methods）本身不能用箭头函数，否则this就飘了！

2.2 解构赋值：拆快递般的爽快感
从Vuex取状态时，ES6解构赋值能让你优雅如拆盲盒：

// 传统写法（手撕胶带）
computed: {
  total() {
    return this.$store.state.cart.list.length
  }
}

// ES6解法（剪刀开箱）
import { mapState } from 'vuex'
computed: {
  ...mapState(['cart']), // 一把拆出cart对象！
  total() {
    return this.cart.list.length
  }
}

2.3 模板字符串：告别拼接哮喘句
Vue模板里虽用双括号，但JS区域的字符串拼接曾让人崩溃：

// ES5字符串拼接
computed: {
  welcomeMsg: function() {
    return '你好，' + this.name + '！今天是' + this.date + '。'
  }
}

// ES6模板字符串（直接嵌入变量）
computed: {
  welcomeMsg() {
    return `你好，${this.name}！今天是${this.date}。` // 反引号+${}真香！
  }
}

三、完整示例：手把手调一杯Vue+ES6特饮

下面用ES6语法写个购物车组件，体验现代前端开发的丝滑：

<template>
  <div class="cart">
    <h2>{{ title }}</h2>
    <ul>
      <!-- 解构item直接使用 -->
      <li v-for="{ id, name, price } in items" :key="id">
        {{ name }} - ¥{{ price }}
        <button @click="removeItem(id)">删除</button>
      </li>
    </ul>
    <p>总价: ¥{{ totalPrice }}</p>
    <button @click="checkout">结账（异步模拟）</button>
  </div>
</template>

<script>
// ES6模块化导入
import { mapActions } from 'vuex'

export default {
  name: 'ShoppingCart',
  data() {
    return {
      title: 'ES6真香购物车',
      items: [
        { id: 1, name: 'Vue实战指南', price: 68 },
        { id: 2, name: 'ES6秘籍', price: 52 }
      ]
    }
  },
  computed: {
    // 箭头函数+隐式返回
    totalPrice() {
      return this.items.reduce((sum, { price }) => sum + price, 0)
    }
  },
  methods: {
    // 展开运算符混入Vuex action
    ...mapActions(['updateCart']),
    
    // 箭头函数处理异步（注意：这里不能用箭头函数定义方法本身！）
    removeItem(itemId) {
      this.items = this.items.filter(({ id }) => id !== itemId)
    },
    
    // 异步操作+箭头函数保护this
    async checkout() {
      try {
        // 模拟API请求
        const result = await this.$http.post('/api/checkout')
        console.log(`结账成功：${result.msg}`)
      } catch (error) {
        console.error('结账失败：', error)
      }
    }
  }
}
</script>

代码亮点解析：

v-for中直接解构{ id, name, price }，模板更清爽
reduce计算总价时使用箭头函数和参数解构，一行代码搞定
异步checkout方法用async/await替代回调地狱

四、进阶玩法：ES6如何赋能Vue3 Composition API

Vue3的Composition API简直是ES6的“亲儿子”。比如用ref和reactive：

import { ref, reactive } from 'vue'

export default {
  setup() {
    // 响应式数据（ES6 const声明+ref）
    const count = ref(0)
    const state = reactive({ items: [] })
    
    // 方法直接用箭头函数
    const addItem = (item) => {
      state.items.push(item)
    }
    
    // 解构返回，模板直接使用
    return { count, state, addItem }
  }
}