新手小白求教 methods 和 computed 的区别
发布于 7 年前 作者 slowsoul 4279 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

*** 使用的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缓存依赖以外,methodscomputed的区别还有哪些?

这就触及到我的知识盲区了

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

回到顶部