vue 踩坑 01 ->兩種建立vue執行個體的差別

第一個例子

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

第二個例子

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

這兩個例子在頁面渲染上是沒有差别的,但是在控制台輸出的console.log(app)是有差别的

第一個是一個vue執行個體

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
           

第二個僅僅是一個DOM對象

<div id="app'>Hello Vue</div>
           

如果dom元素的id沒有和js内置對象重名，或者沒有被重寫，那麼這個id的“變量”是指向這個dom元素的。即：不對app進行重新指派，則app指向dom元素。由于第一種方法對app重新指派，是以app指向了Vue對象。

另外，<img name="app">這樣的也會有類似的效果