vue中function和method的用法

Vue.js 中 function 和 method 的用法

在 Vue.js 中，function 和 method 用于定义组件或实例中的方法，但它们具有不同的作用域和行为。

function

function 是 JavaScript 中的标准函数声明或表达式，在 Vue.js 中没有特殊含义。它们定义在 Vue 实例或组件之外，可以在组件或模板中使用，但不能访问组件或实例的数据和方法。

立即学习“前端免费学习笔记（深入）”；

method

method 是 Vue.js 特有的关键字，用于定义组件或实例中的方法。它们与以下特性有关：

用途

function 用来定义通用或不涉及组件数据的函数，例如：

// 在 Vue 实例外部function formatDate(date) {  // ...业务逻辑}// 在 Vue 实例中formatDate(new Date());

method 用来定义组件特定或需要访问组件数据的函数，例如：

// 在 Vue 组件中methods: {  save() {    this.data = { name: 'John Doe' };  }}

使用规则

示例

// Vue 组件export default {  methods: {    // 方法    increment() {      this.count++;    },    // 通用函数（不涉及组件数据）    formatDate(date) {      // ...业务逻辑    }  }}