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

最新推荐文章于 2022-10-20 18:11:13 发布

原创最新推荐文章于 2022-10-20 18:11:13 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

这篇博客介绍了Vue.js的基础应用，特别关注了ES6规范如何简化对象内的函数定义。通过一个简单的计数器应用示例，展示了如何在Vue实例中使用箭头函数和对象字面量语法，实现数据绑定和定时更新。这有助于开发者理解Vue组件的data和mounted生命周期钩子函数的用法。

最近初学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')