普通函数

在Vue中，普通函数可以作为组件的方法来使用，但它们不会自动this绑定到Vue实例的上下文。在Vue中使用普通函数时，需要手动绑定this指向。

例如，在Vue组件中使用普通函数：

<template><div><button @click="greet">Greet</button></div>
</template><script>
export default {methods: {greet() {// 在这里，'this' 指向 Vue 实例alert('Hello from ' + this.name);}},data() {return {name: 'Vue'};}
}
</script>

如果要在Vue组件外部使用普通函数，或者需要在某些回调函数中保持this指向Vue实例，可以使用箭头函数或者bind、call、apply方法来手动绑定this。

使用bind方法：

export default {data() {return {name: 'Vue'};},created() {this.greetFunc = function() {alert('Hello from ' + this.name);}.bind(this);},methods: {greet() {this.greetFunc();}}
}

JavaScript的call或apply方法来手动绑定函数内的this。

例如，你有一个Vue组件如下：

Vue.component('my-component', {data() {return {message: 'Hello Vue!'};},methods: {greet() {alert(this.message);}}
});

你可以在组件外部使用call或apply来手动绑定this到这个Vue实例：

// 假设你已经有了一个Vue实例
var vm = new Vue({// ...
});// 使用call来调用greet方法，并手动绑定Vue实例
vm.$options.methods.greet.call(vm);// 或者使用apply，如果你需要传递参数
vm.$options.methods.greet.apply(vm, []);

箭头函数

在Vue中，箭头函数（Arrow Functions）通常用于简化代码，提供更简洁的语法。它们可以用于方法定义、计算属性、事件监听器等。箭头函数语法如下：

(param1, param2, ...) => {// 函数体
}

如果函数体只有一个表达式，可以省略花括号，并直接返回该表达式的结果：

param => expression

在Vue中使用箭头函数的例子：

<template><div><button @click="increment">Click me</button><p>{{ count }}</p></div>
</template><script>
export default {data() {return {count: 0,};},methods: {increment() {this.count++;},},// 使用箭头函数简化计算属性computed: {computedCount: vm => vm.count + 1,},// 使用箭头函数简化事件监听器created() {this.$watch('count', (newValue, oldValue) => {console.log(`count has changed from ${oldValue} to ${newValue}`);});},
};
</script>

Vue中箭头函数和普通函数的区别

在Vue中，箭头函数和普通函数的主要区别在于它们如何处理this关键字。

普通函数每个函数都有自己的this指向，如果你在对象的方法中使用普通函数，this指向的是调用这个方法的对象。

箭头函数没有自己的this，箭头函数的this是由外层作用域决定的。也就是说，箭头函数中的this指向的是定义时所在的对象，而不是使用时所在的对象。

// 普通函数
methods: {normalFunction() {console.log(this); // Vue实例return () => {console.log(this); // 同样是Vue实例};}
}// 箭头函数
methods: {arrowFunction = () => {console.log(this); // Vue实例，因为它是在Vue组件方法中定义的}
}

在Vue模板中绑定事件监听器时，箭头函数特别有用，因为这样可以保持this指向当前的Vue实例，而不是指向事件监听器的DOM元素。

<template><button @click="() => this.someMethod()">Click me</button>
</template>