Vue.js_構造器及其實例化概念

Vue構造器
1、Vue.js是一個構造函數，編程中稱之為構造器
2、每一個new Vue() 都是一個Vue構造函數的實例，這個過程叫做實例化
3、構造函數需要將其實例化后才會啟用 var vm = new Vue({ //...})
4、Vue構造器要求實例化時需要傳入一個選項對象
5、選項對象包括數據(data)，模板(tamplate)，掛載元素(el)，方法(methods)，生命周期鈎子等選項
附：Vue實例傳入選項對象API文檔(https://cn.vuejs.org/v2/api/)

屬性與方法
1、data會代理其對象里的所有屬性
2、只有data里的屬性是響應式的，即通信是雙向的，如demo中所示
3、Vue被實例化后，再創建的屬性，將不會觸發視圖更新，如demo中所示：
如：<p>{{a}},{{b}},{{c}},{{d}}</p>
1）a,b,c都會在視圖中顯示
2）a在實例化后仍然保持數據響應
3）d盡管在console.log(data)中存在，但視圖卻找不到，且會報錯
4）因此請不要試圖在實例化后添加任何屬性

實例屬性與方法
1、Vue實例暴露了一些有用的實例屬性與方法
2、為與代理屬性區分，方前添加了前綴$
3、app.$data===data //->true
app.$el===document.getElementById("app") //->true
附：Vue實例屬性和方法API參考(https://cn.vuejs.org/v2/api/)

實例生命周期
1、Vue實例化過程中需要經歷一系列額初始化過程，和所有構造函數類似
例如：配置數據觀測--編譯模板--掛載實例到DOM--數據變化時更新DOM
2、實例化過程中會調用一些生命周期鈎子，在此期間，Vue提供執行自定義邏輯的機會
例如：created、mounted、 updated 、destroyed

 

demo：
    <div id="app">
        <p>{{a}},{{b}},{{c}}</p>
    </div>

    <script>
        var data={
            a:1,
            b:2,
            c:3
        }
        var app=new Vue({
            el:"#app",
            data:data
        })
        
        console.log(app.a===data.a); //true

        app.a=5;
        console.log(data.a);  //5

        data.a=10;
        console.log(app.a);  //10

        data.d=12;
        console.log(data);

        console.log(app.$data===data);
        console.log(app.$el===document.getElementById("app"));
    </script>