鍍金池/ 問答/HTML/ new Vue({})和var app=new Vue({})兩種創(chuàng)建vue實(shí)例

new Vue({})和var app=new Vue({})兩種創(chuàng)建vue實(shí)例的區(qū)別在哪？

    <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方式創(chuàng)建時兩個打印信息正常執(zhí)行，通過new Vue方式創(chuàng)建時第二個打印信息報錯，求前輩指點(diǎn)這兩種方式區(qū)別在哪？

回答
編輯回答
局外人

el:"#app"意思是掛載到id為app的元素上。var app 是創(chuàng)建的app vue實(shí)例。你把兩個名字改個不一樣試試

2018年7月31日 19:45
編輯回答
裸橙

你不如打印一下app看看兩個app的區(qū)別。
如果dom元素的id沒有和js內(nèi)置對象重名，或者沒有被重寫，那么這個id的“變量”是指向這個dom元素的。即：不對app進(jìn)行重新賦值，則app指向dom元素。由于第二種方法對app重新賦值，所以app指向了Vue對象。
另外，<img name="app">這樣的也會有類似的效果

2018年5月15日 09:36
編輯回答
吢丕

只是new Vue({})而不var app=new Vue({})賦值給app這個變量的話, app就實(shí)際不是一個Vue的實(shí)例,
它其實(shí)直到app.msg=123才被創(chuàng)建, 不具有$data屬性

2017年8月23日 17:03