最近在用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
(逃
网友评论