VUEJS实例中DATA属性的三种写法及区别

点击上方蓝字"优派编程"选择“加为星标”，第一时间关注原创干货

VUEJS实例中DATA属性的三种写法及区别

https://www.fang1688.cn/study-code/2083.html

一：对象写法

<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对象，通过创建data函数，每次创建一个新的组件实例后，能够调用data函数，从而返回一个全新副本。

往期推荐

bat自动校对时间脚本，让windows系统自动校对时间

软件开发常用词汇表

免费XDISPLAY：将IPAD或安卓平板，变成WINDOWS（MAC）系统的显示器副屏

2021最新JAVA学习资料,全套源码无加密网盘下载

PHP提高连接数据库的效率

JDK11中文API文档+JAVAEE的API文档（CHM格式）免费下载

最近小编方包新开了一个小程序商城店铺，希望大家购物愉快！不买点去看看也好，为我的小店铺涨涨流量也好！谢谢了！

我的【知识学堂小店】，点击下面小程序进入商城即可！

---

送福利了！关注下方的公众号：“优派编程”，搜索关键词“资料”，即可获得软件app下载资源和python、java等编程学习资料！

关注公众号“优派编程”，搜索关键字获取更多学习资料