码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-04-12 07:56:40      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:简单   on()   javascrip   fun   组件   data   共享   login   als   

一:对象写法

<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>

  三:函数的简写 (第3种是第2种的ES6写法)----可以统一使用第三种写法

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

  

区别

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

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

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

标签:简单   on()   javascrip   fun   组件   data   共享   login   als   

原文地址:https://www.cnblogs.com/cn-oldboy/p/12683337.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!