新手小白求教 methods 和 computed 的区别
发布于 2个月前 作者 slowsoul 463 次浏览 来自 问答

*** 使用的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的区别还有哪些?

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

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

1 回复

用方法的话如果是用{{fullName()}}要加括号才会会返回你期待的值,如果直接是fullName就会像你上面一样打印函数本身,用计算属性相当于vue实例的一个缓存变量,他的依赖改变了,他的值就会重新计算并缓存,不知道这么说你明白了没?

回到顶部