2.Vue例項

<div id="app"></div>
    <div id="app1"></div>
    <script>
        var obj = {a:1};
        var vm = new Vue({
            el:'#app',
            data:obj
        })
        console.log(vm.a);//列印1
        console.log(vm.a == obj.a);//列印true
        vm.a = 4;//通過Vue例項vm修改obj的值
        console.log(obj.a);//物件obj的值也被改變
        console.log(vm.a);

        // 使用Object.freeze()方法後,obj1的值無法改變
        var obj1 = {b:1};
        Object.freeze(obj1);
        var vm1 = new Vue({
            el:"#app1",
            data:obj1
        })
        //vm1.b = 6;
        //因為使用了Object.freeze()方法,
        //通過Vue例項vm1強行修改obj1的值會引發報錯
        console.log(obj1.b);

        //tips: API 參考中查閱到完整的例項 property 和方法的列表。
        //包括:data、props、propsData、computed、methods、watch
        //在API文件中-選項資料處可檢視
        console.log(vm1.$data);//列印vm1例項中的物件,一定要加$符合,如$data
                                //否則列印undefined
    </script>