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

data属性的三种写法

1、__

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

2、__

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

3、__

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

第3种是第2种的ES6写法

区别

1）在简单的Vue实例中，没什么区别，因为你app对象不会被复用。

var app = new Vue({...})

• 1

2）但是在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。

export default{
    data(){
        return {
            ...
        }
    }
}