new Vue({})和var app=new Vue({})两种创建vue实例的区别在哪？

Question

    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        })
        app.msg=123
        console.log(app.msg)
        console.log(app.$data.msg === app.msg)
    </script>

上面代码通过var方式创建时两个打印信息正常执行，通过new Vue方式创建时第二个打印信息报错，求前辈指点这两种方式区别在哪？

Answer 1

只是new Vue({})而不var app=new Vue({})赋值给app这个变量的话, app就实际不是一个Vue的实例,
它其实直到app.msg=123才被创建, 不具有$data属性

Answer 2

你不如打印一下app看看两个app的区别。
如果dom元素的id没有和js内置对象重名，或者没有被重写，那么这个id的“变量”是指向这个dom元素的。即：不对app进行重新赋值，则app指向dom元素。由于第二种方法对app重新赋值，所以app指向了Vue对象。
另外，<img name="app">这样的也会有类似的效果

Answer 3

el:"#app"意思是挂载到id为app的元素上。var app 是创建的app vue实例。你把两个名字改个不一样试试