vue.js - VueJS 方法和函数的区别？

Question

我没有找到太多关于这个的东西，使用方法和在脚本标签中声明一个函数有什么区别？
示例.vue

<script>
export default{
    methods: {
        testfunction1(){
            ...
        }
    },
    mounted(){
        this.testfunction1();
    }
}
</script>

相比

<script>
export default{
    methods: {
        ...
    },
    mounted(){
        testFunction1();
    }
}

function testFunction1(){
    ...
}
</script>

PS:如果它们都是合法的，它们的用例是什么？ - 什么时候使用两者？

Answer 1

简而言之，testFunction在 methods 之外声明将无法通过 this 访问 Vue 实例.
例如，这将不起作用

function testFunction() {
  console.log(this.someDataProperty)
  // "this" is the module scope and someDataProperty will not be defined
}

export default {
  data: () => ({ someDataProperty: 'whatever' }),
  mounted () {
    testFunction()
  }
}

如果你的函数是纯函数，那么在 methods 之外声明它们是没有问题的。 .

方法也成为组件 API 的一部分，因此您可以在父组件中拥有类似的内容

<ChildComponent ref="child"/>

this.$refs.child.someMethod()

在外部声明的函数 methods将无法以这种方式使用。

ssc-hrep3 提到的另一个区别是只能从组件的模板中调用方法

<button @click="someMethod()">Click me!</button>