vue和vuex中的ES6 Shorthand method names

666.png

最近在用vue和vuex开发。
在.vue单文件的生命周期和vuex的actions定义中，有两段代码让人费解：
pag.vue

export default {
    //...
    created(){
        this.$store.dispatch('getUsersSize')
    }
    //...
}

action.js中

const actions = {
    getAllUsers({commit},url){
        dataapi.getData(url,(users)=>{
            commit(types.RECEIVE_USERS,{users})
        })
    }
}

抽离出来就是{created(){}}和{getAllUsers({commit},url){}}
正常情况下，如果将函数赋值到对象的属性值，简称为方法，应该这样写才对：
{created:function(){}}以及{getAllUsers:function({commit},url){}}

所以我很纳闷这是什么鬼东西？

印象中ES6有个概念叫computed property，于是去查MDN。
最后查到其实并不是计算属性，而是shorthand methods names

// Shorthand method names (ES2015)
var o = {
  property([parameters]) {}
};

而计算属性其实是这样的：

// Computed property names (ES2015)
var prop = 'foo';
var o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
};

仔细对比{created(){}}和{created:function(){}}。
所以这个ES6 Shorthand method names语法糖其实就是，省略了':function'，省略了冒号和'function'。
虽然这个sugar不是很甜，但好歹是个糖，糖多了自己写的bug别人就看不懂了。
而人们往往对于不懂的东西，都会说：666
(逃

期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

• SegmentFault技术圈:ES新规范语法糖
• SegmentFault专栏：趁你还年轻，做个优秀的前端工程师
• 知乎专栏：趁你还年轻，做个优秀的前端工程师
• Github博客: 趁你还年轻233的个人博客
• 前端开发QQ群：660634678

• 微信公众号： 人兽鬼 / excellent_developers

  
  
  

努力成为优秀前端工程师！