我开始学习Vue.js和ECMA6语法,我在教程中看到:

methods: {
  someMethod: function() { 
    console.log(this) // this works
  }
} 

然后我觉得语法可能是:

methods: {
  someMethod: () => {
    console.log(this) // this undefined
  }
}

但这是可行的:

methods: {
  someMethod () {
    console.log(this) // this works
  }
}

你能解释这种差异和ECMA5语法吗?

推荐答案

在三个选项中,ES5只支持第一个选项.另外两个是ES6中的新增内容.

第三个选项是第一个选项的ES6快捷方式,因此它们在ES6中的工作方式相同.

当使用第二个箭头语法时,this并不像第一个和第三个箭头语法那样被设置为宿主对象.这是arrow语法的一个特性,因此当您希望将this设置为宿主对象时,不应该使用它.相反,this将被设置为定义代码的词法上下文——通常被称为"封闭上下文中的this值"或"这个的词法值",在您的情况下,它将是最初声明宿主对象时的this,显然是undefined.

这里有一篇关于箭头函数的很好的参考文章:ES6 In Depth: Arrow functions

Vue.js相关问答推荐

为什么v-show需要组件的包装元素?

如何在Vue 3中将动态特性从主零部件同步到子零部件

如何以惯用的方式触发 vue3 中同级组件的效果?

为什么将 name 与 router-link 一起使用比仅使用 to 与 path 更好?

处理多张卡片中的按钮

在Vue cli项目中,Laravel api app放在哪里以及如何在vue js中调用api?

混合使用 React 和 Vue 是个好主意吗?

VueJS:如何在组件数据属性中引用 this.$store

如何使用带有自定义标签和类的`transition-group`

如何渲染数组以 Select 选项 vue.js

如何将对象作为props传递并让组件更新子对象

在组件的样式部分使用 Vue 变量

如何像 React 中的 {...props} 一样在 Vue 中解构 props?

使用 VueJS 在 v-for 中转换

为什么 vue 文档说 refs 不是响应式的,而实际上它们是响应式的

按键删除对象不会更新vue组件

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新

如何在我的 vue js 中实现无限滚动

如何在 Vue 数据对象中运行函数?