javascript - 为什么在 computed() 中使用时无法识别 Vue 函数？

Question

下面的代码(一个 Vue method 在组件被挂载时用在字符串模板中)有效::

new Vue({
  el: "#app",
  methods: {
    perc: w => w / 100
  },
  mounted() {
    console.log(`hello ${this.perc(20)}`)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app"></div>

下面的 = 上面的扩展为在 computed 变量中使用 this.perc()，失败并返回 TypeError: this.perc is not a function

new Vue({
  el: "#app",
  methods: {
    perc: w => w / 100
  },
  computed: {
    data: {
      y: `hello ${this.perc(20)}`
    }
  },
  mounted() {
    console.log(this.data)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app"></div>

为什么 this.perc() 在计算变量中不可用？

Answer 1

必须是computed property中的一个函数.

new Vue({
  el: "#app",
  methods: {
    perc: (w) => w / 100
  },
  computed: {
    data () {
      return `hello ${this.perc(20)}`
    }
  },
  mounted() {
    console.log(this.data)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app"></div>