vue.js 中数据中的方法和方法中的方法之间的区别

Question

我想知道在数据中声明的方法和在方法中声明的方法有什么区别？

var app = new Vue({
  el: "#vue-app",
  data: {
    name: function() {
      console.log("Alex");
    }
  },
  methods: {
    name: function() {
      console.log("Alex");
    }
  }
});

Answer 1

tl;dr如果你里面只有 a console.log("Alex")，它们的工作原理是一样的。但如果你深入了解this它们，它们就会有很大的不同。

\n\n

首先，Vuedata对象应该是纯 JavaScript 对象，没有方法。来自API 文档：

\n

\n

Vue 实例的数据对象。Vue 会递归地将其属性转换为 getter/setter，使其成为 \xe2\x80\x9creactive\xe2\x80\x9d。该对象必须是普通的：本机对象（例如浏览器 API 对象和原型属性）将被忽略。经验法则是数据应该只是数据——不建议观察对象及其自身的状态行为。

\n

\n

因此，即使它有效，我也会宣布它们methods遵循POLA。

\n

一个关键的区别：

\n

但是，更重要的是，有一个关键因素：方法绑定到 Vue 实例。这意味着this内部方法始终指向当前的 Vue 实例。

\n

\r\n

\r\n

new Vue({\n  el: \'#app\',\n  data: {\n    nameData: function() {\n      console.log("nameData", this.otherMethod()) // doesn\'t work\n    },\n  },\n  methods: {\n    nameMethod: function() {\n      console.log("nameMethod", this.otherMethod()); // works\n    },\n    otherMethod() {\n      return "I am other method";\n    }\n  }\n})

\r\n

<script src="https://unpkg.com/vue"></script>\n\n<div id="app">\n  <button @click="nameData">invoke nameData</button><br>\n  <button @click="nameMethod">invoke nameMethod</button>\n</div>

\r\n

\r\n

\r\n

\n

还有一个例子：

\n

\r\n

\r\n

new Vue({\n  el: \'#app\',\n  data: {\n    id: 3,\n    ids: [1,2,3,4],\n    equalsIdData: function(i) {\n      return this.id === i;\n    },\n  },\n  methods: {\n    equalsIdMethod: function(i) {\n      return this.id === i;\n    },\n    yetAnotherMethod: function() {\n      console.log(\'equalsIdMethod:\', this.ids.filter(this.equalsIdMethod)); // filters correctly\n      console.log(\'equalsIdData:\',   this.ids.filter(this.equalsIdData)); // filters incorrectly\n    },\n  }\n})

\r\n

<script src="https://unpkg.com/vue"></script>\n<div id="app">\n  <button @click="yetAnotherMethod">invoke yetAnotherMethod</button>\n</div>

\r\n

\r\n

\r\n

\n