Vue.js中data内声明的方法与methods内声明的方法有何区别？

Great question—this is a common point of confusion when starting out with Vue, so let's break down the core differences using your example as a reference (first, though: having the same key name in both data and methods is a bad practice—Vue will throw a warning here because it can't resolve the ambiguity, so we'll adjust the example to avoid that).

1. Core Purpose & Intent #

• methods is for actions: This option is explicitly designed for functions that perform tasks—like handling click events, processing data, or being called as helpers in your template or component logic. These are your "do something" functions.
• data is for reactive state: data should hold values (strings, numbers, objects, arrays) that drive your component's reactivity. While you can stick a function here, it's not what the option was built for. A function in data becomes a reactive property, not a dedicated method.

2. Reactivity Behavior #

• Functions in data are reactive: Vue will track changes to this function as part of the component's state. If you ever reassign this.dataName to a different value (like a string), Vue will trigger a re-render. This is almost never useful for functions, and can lead to unexpected behavior.
• Functions in methods are non-reactive: These are plain functions attached to your component instance. Vue doesn't track changes to them, which is exactly what you want—you don't need reactivity for a function that's meant to be called on demand.

3. Template Usage #

• data functions in templates: If you try to use {{ dataName }} in your template, it will render the string representation of the function (e.g., function() { console.log("Alex"); }), not execute it. To run it, you'd need {{ dataName() }}—but this will execute every time the component re-renders, which is inefficient and usually not what you want.
• methods functions in templates: You can call them directly with {{ methodName() }} (though more commonly, you'll use them with directives like v-on:click="methodName"). They only run when explicitly invoked or triggered by an event, so no unnecessary re-runs.

Example to Clarify #

Let's adjust your code to avoid the name collision:

var app = new Vue({
  el: "#vue-app",
  data: {
    dataName: function() { console.log("From data!"); }
  },
  methods: {
    methodName: function() { console.log("From methods!"); }
  }
});

• Calling app.dataName() will run the function, but since it's in data, it's part of the reactive state. If you did app.dataName = "Hello", the component would re-render.
• Calling app.methodName() runs the method, and reassigning app.methodName won't trigger any reactivity (and is a practice you should avoid anyway).

Quick Summary #

• Use methods for any function that performs an action, handles events, or needs to be called explicitly.
• Never put functions in data unless you have an extremely rare edge case where you need a reactive function reference. data is for state values, not actions.

内容的提问来源于stack exchange，提问作者Alexis