VueJS实例中data属性的三种写法及区别

最新推荐文章于 2025-07-20 09:58:22 发布

原创最新推荐文章于 2025-07-20 09:58:22 发布 · 938 阅读

1 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了Vue.js中data属性的三种不同写法：直接定义、通过函数返回及使用箭头函数。这三种方式在简单实例中表现相同，但在组件复用场景下，为避免多个组件实例共享同一data对象，推荐使用返回函数的方式。

data属性的三种写法

一、

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            isLogin: false
        }
    })
</script>

二、

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data: function(){
            return {
                isLogin: false
            }
        }
    })
</script>

三、

<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data() {
            return {
                isLogin: false
            }
        }
    })
</script>