计算的Vue和方法在调用时具有不同的行为

Question

我有以下代码，它是路由器组件

const tag_cloud_links = {
  template:
  `
  <div class="tag-cloud-links">
    <router-link v-for="(value,key) in tags"
      :key="value.date"
      :to="{name:'tags',params: getBase(value)}">
      {{ key }}
    </router-link>
  </div>
  `
  ,
  computed: {
    getBase(value){
      return value.path.slice(6,value.path.length - 1)
    }
  },
  props:{
    tags:Object
  }
};

当我尝试调试getBase(value)

时

如您所见，值是vue实例

当我回到栈中跟随时

value是正确的对象，这是我想传递给getBase的对象，

但是为什么当vue调用计算函数时，参数会变为vue实例？

当我将计算更改为方法

  methods: {
    getBase(value){
      return value.path.slice(6,value.path.length - 1)
    }
  },

值是当前对象，不再是vue实例

为什么computed和methods之间有不同的参数？

Answer 1

我相信您只能通过getter/setter syntax设置计算属性。否则，计算的“方法” /属性不应具有任何参数。它们被用作快速反应访问器，并且在模板btw中不带括号地被调用。在您的情况下，您显然需要使用方法，而不是计算属性。进一步了解Vue's computed properties。