脚本宝典收集整理的这篇文章主要介绍了

vue和vuex中的ES6 Shorthand method names

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

图片描述

最近在用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 names

全部内容,希望文章能够帮你解决

vue和vuex中的ES6 Shorthand method names

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过