javascript-method-in-object

今天在浏览Vue官网时，看到了如下代码。

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

生性多疑的我不禁产生了怀疑，这是什么语法？createApp方法接受一个JS对象，可是JS对象不都是冒号分隔的键值对吗？为什么这个setup()方法没有冒号？难道这是Vue的特殊语法？

于是问了一下AI，原来这是ES6的新增语法（基础知识还是不牢呀，《深入理解ES6》还要再读几遍才行），如果一个JS对象中有函数，那么ES5中必须像下面这样写才行：

var obj = {
  setup: function() {
    console.log('foo')
  }
}

而ES6新增了一个语法功能，对象中的函数可以省略冒号和function关键字，直接写函数体，如下：

var obj = {
  setup() {
    console.log('foo')
  }
}

于是开头那段代码换成ES5的写法就是：

var obj = {
  setup: function() {
    return {
      count: ref(0)
    }
  }
}
createApp(obj).mount('#app')

这样是不是就好理解多了呢？话不多说，该做饭了。昨天刚从成都旅游回来，今天家里也没有什么菜，姑且做一个圆葱炒蛋吧。