关于JavaScript在对象{}内部定义函数的几种方式（ES6的极简之美）

最近初学Vue.js，对JavaScript中函数、对象的运用方式颇受启发，先看以下代码：

HTML：

<div id="counter">
    Counter: {
   
   { counter }}
</div>

JS:

    const Counter = {
        data() {
            return {
                counter: 0
            }
        },
        mounted() {
            setInterval(() => {
                this.counter++
            }, 1000)
        }
    }
    Vue.createApp(Counter).mount('#counter')

话不多说，其实es6规范指定了对象{}内部的字面量定义可以省略function，也就是说，上面代码等价于：

    const Counter = {
        data: function() {
            return {
                counter: data.num
            }
        },
        mounted: function() {
            setInterval(() => {
                this.counter++
            }, 1000)
        }
    }
    Vue.createApp(Counter).mount('#counter')