Vue中app实例对象的几种写法

Posted 2020-11-17 码农小Ge历险记

1.传统方法（练习 小DEMO中用的这种）

    <script type="text/ecmascript">
            var app=new Vue({
                el:"#app",
                data:{
                    message:"hello world"
                }
            })
        </script>

2.带有返回值的方法（实际项目中大多用的这种，优点下面会讲到）

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

第二种的es6写法：

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

html里面body部分：这里以helloworld 为例

<div id="app">
            {{message}}
</div>

区别：

传统的vue.js实例方法 即第一种方法，基本不会被复用，作为练习用较多。

第二种第三种实际项目中用的比较多，因为可能在多处调用同一组件，为了不让多处的组件共享同一data对象，只能返回函数。

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

来源：之前看过一篇文章，大致是这么介绍的，今天想起来了更新下，项目中确实后两种用的较多。