Fe-interview: [vue] vue中data的属性可以和methods中的方法同名吗？为什么？

[haizhilin2013]

[vue] vue中data的属性可以和methods中的方法同名吗？为什么？

[ttentau]

不能，会报错。

[mying01]

Method "xxx" has already been defined as a data property

[llccing]

@mying01 , 贴一下vue.js代码中的位置

[webwhy]

可以，但eslint不允许你这么做

[xiguan-wuge]

会报错（关闭了eslint校验），比如是在使用饿了么组件时，声明一个同名的data 属性和methods方法时，会报错。添加样式的功能没有奏效。

[binnuo]

可以，但eslint不允许你这么做

不是啊，就算没有eslint依然会报错的。[Vue warn]: Method "myname" has already been defined as a data property.

[RainAley]

如果真的重名了，data中的变量会覆盖methods中的方法

[lukejian003]

data中的属性和methods方法重名会优先执行data中的属性并且报错

[1018715564]

大家答的都对，但是为什么会先执行data中的呢

[Linkontoask]

@1018715564 https://github.com/vuejs/vue/blob/77796596adc48d050beefd11e827e8e4d44c6b3c/src/core/instance/state.js#L48

[Linkontoask]

错误会报出来，但是没有中断函数执行，只要不是和 props 同名并且第一个字符不是 _或$ ，那么就可以使用 this 访问，然后 observe 数据。
同名的方法被干掉 TypeError: handler.apply is not a function

[InterfaceBoy]

肯定是不能同名的了，1、vue语法就会报错，2、如果同名那么你在使用this.XXX的时候是调用方法还是调用变量呢

[yangkunxiao]

不可以。在initState的时候，会对data中的属性、props、methods的属性名进行检查。出现同名立即warn

[mingyec]

为什么会先执行data，是因为组件初始化时的依赖收集会先执行

[tenadolanter]

不可以，data和methods都是挂载this上的，对象上有同名属性肯定会报错

[cookingHero]

源码 中的 initData() 方法
if (methods && hasOwn(methods, key)) { warn( Method "${key}" has already been defined as a data property., vm ) }
会取出 methods 中的方法进行判断，也就是 hasOwn(methods, key)
如果此 key 值 在 methods 中存在，会有warn 警告哦**

[laozhan0000]

不可以，会报错

[Lzp0225]

原理是可以重名，但是在vue中执行initData会抛出错误；
initState中初始化opts的顺序是 props、methods、data、computed、watch所以data里的key会覆盖之前的key；