vue.js 中的 function 和 method 都用于定义方法，但作用域和行为不同。function 在组件或实例之外定义，不能访问组件数据，而 method 在组件或实例中定义，可访问组件数据并触发响应式更新。1. function 用途：通用函数，不涉及组件数据。2. method 用途：组件特定函数或需要访问组件数据的函数。
Vue.js 中 function 和 method 的用法
在 Vue.js 中，function 和 method 用于定义组件或实例中的方法，但它们具有不同的作用域和行为。
function
function 是 JavaScript 中的标准函数声明或表达式，在 Vue.js 中没有特殊含义。它们定义在 Vue 实例或组件之外，可以在组件或模板中使用，但不能访问组件或实例的数据和方法。
立即学习“前端免费学习笔记（深入）”；
method
mallcloud商城
下载
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
method 是 Vue.js 特有的关键字，用于定义组件或实例中的方法。它们与以下特性有关：
-
作用域：
method绑定到组件或实例，可以访问组件或实例的数据和方法。 -
响应性：
method中对数据所做的更改将触发 Vue 的响应式系统，更新组件的视图。 -
使用：
method可以从组件或模板中使用，通过组件的this关键字可以访问。
用途
function 用来定义通用或不涉及组件数据的函数，例如：
<code class="javascript">// 在 Vue 实例外部
function formatDate(date) {
// ...业务逻辑
}
// 在 Vue 实例中
formatDate(new Date());</code>method 用来定义组件特定或需要访问组件数据的函数，例如：
<code class="javascript">// 在 Vue 组件中
methods: {
save() {
this.data = { name: 'John Doe' };
}
}</code>使用规则
-
function可以随时在代码中定义和使用。 -
method应该定义在methods选项中，该选项是 Vue 组件的一个属性。 -
method名称应该是一个字符串。 -
method可以接受参数。
示例
<code class="javascript">// Vue 组件
export default {
methods: {
// 方法
increment() {
this.count++;
},
// 通用函数（不涉及组件数据）
formatDate(date) {
// ...业务逻辑
}
}
}</code> 
