为什么VUE的methods不能用箭头函数
时间: 2023-05-31 08:03:33 浏览: 57
VUE的methods不能使用箭头函数是因为箭头函数没有自己的this,它的this指向的是定义时的词法作用域,而不是运行时的作用域。而VUE的methods中需要使用this来访问组件的数据和方法,因此不能使用箭头函数。如果使用箭头函数,this将指向全局对象window,而不是组件实例,会导致访问数据和方法出错。所以在VUE中,应该使用普通的函数来定义methods。
相关问题
vue methods的函数是尖头函数嘛
Vue 中的 methods 方法可以使用箭头函数或者普通函数来定义。这取决于你的编码风格和需求。
箭头函数和普通函数有一些差别,箭头函数的 this 值在定义时确定,而不是在运行时确定。所以在 Vue 中使用箭头函数可能会导致 this 指向错误,因为 this 不会指向 Vue 实例。
因此,如果你需要在方法中使用 Vue 实例中的属性或者方法,建议使用普通函数来定义 methods。如果你确信方法中不需要访问 Vue 实例中的属性或者方法,可以使用箭头函数。
vue 箭头函数
Vue中的箭头函数是ES6的语法,它可以用于简化函数的书写。在Vue中,箭头函数通常用于简化methods中的方法。
使用箭头函数的语法是这样的:
```
() => {}
```
箭头函数可以有一个或多个参数,当只有一个参数时,可以省略小括号。如果函数体只有一条语句,可以省略花括号。
在Vue的methods中,如果你使用箭头函数来定义一个方法,那么这个方法的this指向的是Vue实例,而不是方法本身的作用域。
举个例子,如果你要定义一个方法来改变data中的某个属性:
```
methods: {
changeName: () => {
this.name = 'new name'
}
}
```
这段代码中,箭头函数中的this指向的是Vue实例,而不是方法作用域,因此修改data中的属性会导致错误。正确的写法应该是:
```
methods: {
changeName() {
this.name = 'new name'
}
}
```
这样就可以正确地访问Vue实例中的data属性了。