美文网首页Web前端之路让前端飞
vue和vuex中的ES6 Shorthand method n

vue和vuex中的ES6 Shorthand method n

作者: 趁你还年轻233 | 来源:发表于2017-10-29 14:49 被阅读64次
    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
    (逃

    相关文章

      网友评论

        本文标题:vue和vuex中的ES6 Shorthand method n

        本文链接:https://www.haomeiwen.com/subject/btzdpxtx.html