*** 使用的vue.js的版本： v2.3.3 ***

问题的描述：

这几天在学Vue，然后看官网的文档，跟着一起写给出的示例demo，在***计算属性***一节的 ***计算缓存 vs Methods***中看到了下面的示例代码：

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

我神奇地发现fullName 并没有绑定在vue实例的data属性上（也即所说的作为响应式依赖），而只是作为computed中的属性名，但是他依旧输出了正确的结果（“Foo Bar“）。于是我对上面的js代码稍作修改：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  methods: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  },
})

输出的结果就不尽人意了： function boundFn(a) { var l = arguments.length; return l ? l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a) : fn.call(ctx) }。 浏览器输出了一行代码，但是控制台没有报错。 然后我再改了一下js代码：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  },
})

结果和上面一样输出一行代码，也没有报错。

所以问题来了

这之中到底发生了什么。除了官网所说的computed缓存依赖以外，methods和computed的区别还有哪些？

最后感谢各位大佬花时间阅读此问题。