vue什么地方不要写箭头函数 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

在Vue的生命周期函数中不要使用箭头函数。

Vue组件中的生命周期函数，如created、mounted、destroyed等，用于在组件的不同阶段执行相应的操作。在这些生命周期函数中，我们通常需要访问组件实例的属性和方法，以及操作组件的数据。但是，如果我们使用箭头函数来定义这些生命周期函数，就会导致this指向不正确，从而无法访问组件实例的属性和方法。

在Vue中，正常的函数定义中，this指向当前组件实例。而箭头函数是没有自己的this，它会继承它所在的作用域的this。因此，在箭头函数中，this是指向外层作用域的this，而不是组件实例。

为了避免这个问题，我们应该使用函数声明的方式来定义Vue组件的生命周期函数，而不是箭头函数。这样，在组件的生命周期函数中，可以正常地使用this来访问组件实例的属性和方法。

例如，在created钩子函数中，我们经常会在这里发送异步请求，获取数据并更新组件的状态。如果使用箭头函数来定义created函数，this指向的是外层的作用域，无法访问到组件实例的属性和方法，造成代码错误。所以，正确使用函数声明来定义Vue的生命周期函数是很重要的。

综上所述，在Vue的生命周期函数中不要使用箭头函数，应该使用函数声明的方式来定义。这样可以确保在生命周期函数中正确地访问组件实例的属性和方法，避免出现错误。

1年前 0条评论

worktile

Worktile官方账号

在 Vue 中，不建议在下列地方使用箭头函数：

生命周期钩子函数：Vue 中的生命周期钩子函数如 created、beforeMount 等在执行时，上下文（this）会自动绑定到当前组件实例上。但是箭头函数没有自己的上下文，它会捕获最近的 this 值，而这个值不是组件实例，所以箭头函数中无法访问到组件实例的属性和方法。

例如，在 created 钩子函数中使用箭头函数无法访问到组件实例的 data：

created: () => {
  console.log(this.data); // undefined
}

正确写法应该是使用普通的函数定义来确保上下文的正确绑定：

created() {
  console.log(this.data); // 可以正常访问
}

methods 属性中的函数：在 Vue 的组件中，有一个 methods 属性用来存放组件的方法。如果在 methods 属性中使用箭头函数来定义方法，那么该函数中的 this 指向的是组件实例本身，而不是 Vue 实例。

例如：

methods: {
  handleClick: () => {
    console.log(this); // 指向 Vue 实例而不是组件实例
  }
}

这样会导致无法正确访问组件的数据和方法。正确的写法是使用普通的函数定义：

methods: {
  handleClick() {
    console.log(this); // 指向组件实例
  }
}

computed 属性中的函数：在计算属性（computed）中，也不应使用箭头函数。计算属性的特点是会缓存计算结果，只有在依赖的数据发生变化时才会重新计算。而箭头函数没有自己的上下文，它会捕获最近的 this 值，这意味着计算属性中使用箭头函数无法正确地监测依赖变化，从而导致计算属性不会根据数据变化而重新计算。

例如：

computed: {
  fullName: () => {
    return this.firstName + ' ' + this.lastName; // 无法正确获取依赖的数据
  }
}

正确的写法是使用普通的函数定义：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName; // 可以正确获取依赖的数据
  }
}

watch 属性中的函数：Vue 的 watch 属性用于监听数据的变化，并在数据变化时执行相应的操作。类似于 computed 属性，watch 属性中的函数也不应使用箭头函数。因为箭头函数没有自己的上下文，它无法访问到 watch 中定义的属性和方法。

例如：

watch: {
  firstName: () => {
    console.log(this.firstName); // 无法正确获取到 firstName 的值
  }
}

正确的写法是使用普通的函数定义：

watch: {
  firstName(newVal, oldVal) {
    console.log(newVal); // 可以正确获取到 firstName 的值
  }
}

Vue 实例的选项函数中的函数（例如 created、mounted 等）：上面已经提到，在 Vue 的生命周期钩子函数和其他选项函数中使用箭头函数会导致 this 指向错误，无法访问到组件实例的数据和方法。因此，在这些函数中都不建议使用箭头函数来定义其他的函数。

总之，在 Vue 中，箭头函数不适合用于需要访问组件实例的上下文（this）的地方，包括生命周期钩子函数、methods、computed、watch等各种选项函数。必要的时候应该使用普通的函数定义来确保函数的正确执行。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue中，不要在以下地方使用箭头函数：

方法中
在Vue组件中，我们经常会使用methods属性定义方法。在methods中定义的函数，需要在Vue实例中被调用，在这种情况下，不能使用箭头函数。箭头函数具有词法作用域绑定，其中的this关键字不会指向Vue实例，而会继承自外层作用域。这样就无法在方法中访问Vue实例的属性和方法。
生命周期钩子函数中
Vue的生命周期钩子函数如created、mounted、updated等是在特定时刻被调用的函数。这些函数中的上下文是由Vue内部决定的，而不是我们手动调用，所以也不能使用箭头函数。同样的原因，箭头函数的this关键字会继承父级上下文，而不是Vue实例。
计算属性中
计算属性是Vue中非常重要的一部分，我们可以使用计算属性来动态计算Vue实例的属性。计算属性内部有缓存机制，只有在依赖的数据发生变化时才会重新计算。由于箭头函数没有自己的this关键字，所以不能正确地获取计算属性所依赖的数据。
Watcher中
Vue中的Watcher用于监听数据的变化，并在数据变化时执行相应的回调函数。在Watcher中，this关键字指向Vue实例，所以不要使用箭头函数，否则this将无法指向正确的上下文。

总结起来，不要在需要访问Vue实例上下文的地方使用箭头函数，因为箭头函数没有自己的this关键字，而是继承外层上下文的this。在Vue中，我们通常需要访问Vue实例的属性和方法，所以要避免使用箭头函数。

1年前 0条评论