AtguiguVue【P11-P13】資料代理

阿新 • • 發佈：2021-11-10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>回顧Object.defineproperty方法</title>
    </head>
    <body>
        <script type="text/javascript" >
            let number = 18;
            let person = {
                name: 
'張三',
                sex:'男'
            };
            Object.defineProperty(person,'age',{
                /*
                value:18,
                enumerable:true, //控制屬性是否可以列舉，預設值是false
                writable:true, //控制屬性是否可以被修改，預設值是false
                configurable:true //控制屬性是否可以被刪除，預設值是false
                 
*/

               /*
               get:function(){

               }
               */
              //當有人讀取person的age屬性時，get函式(getter)就會被呼叫，且返回值就是age的值
               get(){
                    console.log('有人讀取資料了。。')
                    return number
               },
               //當有人修改person的age屬性時，set函式(setter)就會被呼叫，且會收到修改的具體值 

               set(value){
                    console.log('有人修改了age屬性，且值是',value)
                    number = value
               }
            });
            console.log(person);
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>何為資料代理</title>
    </head>
    <body>
        <!-- 資料代理：通過一個物件代理對另一個物件中屬性的操作（讀/寫）-->
        <script type="text/javascript" >
            let obj = {x:100}
            let obj2 = {y:200}

            Object.defineProperty(obj2,'x',{
                get(){
                    return obj.x
                },
                set(value){
                    obj.x = value
                }
            })
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue中的資料代理</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="./js/vue.js"></script>
    </head>
    <body>

        <!-- 
                1.Vue中的資料代理：
                            通過vm物件來代理data物件中屬性的操作（讀/寫）
                2.Vue中資料代理的好處：
                            更加方便的操作data中的資料
                3.基本原理：
                            通過Object.defineProperty()把data物件中所有屬性新增到vm上。
                            為每一個新增到vm上的屬性，都指定一個getter/setter。
                            在getter/setter內部去操作（讀/寫）data中對應的屬性。
         -->

        <div id="root">
            <h2>學校名稱：{{name}}</h2>
            <h2>學校地址：{{address}}</h2>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
            
            const vm = new Vue({
                el:'#root',
                data:{
                    name:'QDU',
                    address:'青島市'
                }
            })
        </script>

    </body>
</html>