箭头函数的疑问

vue的箭头函数转化为传统形态 那return该放哪，原本箭头函数｛｝内的全是return的内容吗

 

Vue 箭头函数转换为传统函数形式

在 Vue 中，箭头函数通常用于简洁地返回对象或值。当你想将箭头函数转换为传统函数形式时，需要注意 return 的位置。

箭头函数转换为传统函数

情况1：箭头函数有花括号 {}

如果原箭头函数有花括号，那么你需要显式地添加 return 语句：

// 箭头函数形式

const fn = () => {

  return {

    message: 'Hello',

    count: 0

  }

}

 

// 传统函数形式

const fn = function() {

  return {

    message: 'Hello',

    count: 0

  }

}

 

情况2：箭头函数省略花括号（隐式返回）

如果原箭头函数省略了花括号，那么它是隐式返回的，转换为传统函数时需要添加 return：

// 箭头函数形式（隐式返回）

const fn = () => ({

  message: 'Hello',

  count: 0

})

 

// 传统函数形式

const fn = function() {

  return {

    message: 'Hello',

    count: 0

  }

}

 

在 Vue 中的常见应用

计算属性

// 箭头函数形式

computed: {

  reversedMessage: () => this.message.split('').reverse().join('')

}

 

// 传统函数形式

computed: {

  reversedMessage: function() {

    return this.message.split('').reverse().join('')

  }

}

 

方法

// 箭头函数形式

methods: {

  greet: () => {

    console.log('Hello')

    return 'Greeting sent'

  }

}

 

// 传统函数形式

methods: {

  greet: function() {

    console.log('Hello')

    return 'Greeting sent'

  }

}

 

注意事项

1. 箭头函数和传统函数的主要区别在于 this 的绑定方式，在 Vue 中通常建议使用传统函数形式，除非你明确知道需要使用箭头函数的特性。
2. 当转换为传统函数时，确保所有需要返回的值都包含在 return 语句中。
3. 如果箭头函数体只有一行且没有花括号，它是隐式返回的，转换为传统函数时必须显式添加 return。