MVVM の理解 + Object.defineproperty メソッド + データプロキシ

1. MVVMの理解

2.Object.defineproperty方法

1.Object.definepropertyメソッドの基本設定項目

問題 1: Object.defineproperty を通じて追加されたオブジェクトのプロパティは走査可能ではありません (列挙可能ではありません)。

問題 2: 追加された属性がトラバースできない問題を解決した後、追加された属性の属性値を変更した後、オブジェクトが印刷されるが、追加された属性値は変更されないままになります。

質問 3: Object.defineproperty を通じてオブジェクトに追加されたプロパティは削除できませんが、直接書き込まれたオブジェクトプロパティは削除できます。

2. Object.defineproperty メソッドの高度な構成項目は特に重要です

3. データブローカー

1. オブジェクトプロキシを介した別のオブジェクトの属性の操作 (読み取り/書き込み)

2. Vue のデータプロキシ

1. MVVMの理解

MVVM モデルに完全に従っているわけではありませんが、Vue の設計も MVVM モデルからインスピレーションを受けています。 したがって、ドキュメントでは Vue インスタンスを表すために変数名 (ViewModel の略称)がよく使用されます。 vm

上記の文は Vue2 のドキュメントからのものなので、Vue を学びたい場合は MVVM を理解する必要があります

Vue インスタンスの結果:

分析の概要 1:

MVVMモデル:

1.M: モデル: データ内のデータ

2.V: ビュー: テンプレートコード

3.VM: ViewModel: Vue インスタンス

見つかった観察結果:

1.データ内のすべての属性は、最終的に Vue でインスタンス化されたオブジェクトに表示されます。

2. Vue インスタンス化されたオブジェクトのすべてのプロパティとVue プロトタイプのすべてのプロパティは、 Vueテンプレートで直接使用できます。

2.Object.defineProperty方法

Object.defineProperty は、オブジェクトにプロパティを追加するメソッドです。

Object.defineProperty (プロパティを追加するオブジェクト、追加するプロパティ、{構成項目オブジェクト})

    <script>
        let person = {
            name:'张三',
            sex:'男',
            age:18
        }
        // Object.defineProperty(person,'age',{
        //     value:18,
        // });
        console.log(Object.keys(person));  //添加的属性可以被遍历到
        console.log(person);
    </script>

age 属性を person オブジェクトに直接追加すると、追加された属性をトラバースできます。

    <script>
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
        Object.defineProperty(person,'age',{
            value:18,
        });
        console.log(Object.keys(person));
        console.log(person);
    </script>

1.Object.definePropertyメソッドの基本設定項目

問題 1: Object.defineproperty を通じて追加されたオブジェクトのプロパティは走査可能ではありません (列挙可能ではありません)。

Object.defineproperty を通じてオブジェクトに追加されたプロパティを印刷および表示すると、追加されたプロパティの色が少し明るくなります。これは、プロパティが列挙できない (走査できない) ことを意味します。

解決策:構成項目の列挙可能な値を true に設定します。

Object.defineProperty(person,'age',{
     value:18,       //配置项1：value:添加属性的值
     enumerable:true,//控制属性是否可以枚举，默认值是false
});

問題 2: 追加された属性がトラバースできない問題を解決した後、追加された属性の属性値を変更した後、オブジェクトが印刷されるが、追加された属性値は変更されないままになります。

解決策:構成アイテムの書き込み可能な値を true に設定します。

Object.defineProperty(person,'age',{
    value:18,       //配置项1：value:添加的属性的值
    enumerable:true,//配置项2：控制属性是否可以枚举，默认值是false
    writable:true,  //配置项3：控制属性是否可以被修改，默认值是false
});

質問 3: Object.defineProperty を通じてオブジェクトに追加されたプロパティは削除できませんが、直接書き込まれたオブジェクトプロパティは削除できます。

直接書き込まれたオブジェクトのプロパティ:

Object.definePropertyによって追加されたオブジェクトプロパティ:

解決策:構成アイテムの書き込み可能な値を true に設定します。

Object.defineProperty(person,'age',{
    value:18,           //配置项1：value:添加的属性的值
    enumerable:true,    //配置项2：控制属性是否可以枚举，默认值是false
    writable:true,      //配置项3：控制属性是否可以被修改，默认值是false
    configurable:true   //控制属性是否可以被删除，默认值是false
});

2. Object.defineProperty メソッドの高度な構成項目は特に重要です

    <script>
        let number = 520;
        let person = {
            name:'张三',
            sex:'男',
        }
        Object.defineProperty(person,'age',{
            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
                console.log('有人读取了age属性了');
                return number;   //返回的是age属性的值
            },
            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(newValue){
                console.log('有人修改了age属性,且值是:',newValue);
            }
        });
        console.log(Object.keys(person));
        console.log(person);
    </script>

質問: person.age = 100 を変更して person オブジェクトを出力した後でも、age 属性が 520 のままなのはなぜですか?

回答: age 属性の値はnumberから取得されるため、number は変更されていません。Set は変更された特定の値を受け取るだけであり、number は変更しないため、number の値を変更する必要があります。

    <script>
        let number = 520;
        let person = {
            name:'张三',
            sex:'男',
        }
        Object.defineProperty(person,'age',{
            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
                console.log('有人读取了age属性了');
                return number;   //返回的是age属性的值
            },
            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(newValue){
                //newValue收到的是要修改的值
                console.log('有人修改了age属性,且值是:',newValue);
                number = newValue;  //要修改number的代码，因为age的值是number的值，set只是收到修改的具体值，但是没有去修改
            }
        });
        console.log(Object.keys(person));
        console.log(person);
    </script>

分析の概要 2:

数値オブジェクトと人物オブジェクトは 2 つの異なるものであり、 Object.defineProperty メソッドを使用して関連付けられます。確かに person はオブジェクトであり、age 属性を持っていますが、age 属性の値は現在利用可能です。

3. データブローカー

1.オブジェクトプロキシを介した別のオブジェクトの属性の操作(読み取り/書き込み)

    <script>
        let obj = {x:100};
        let obj2 = {y:200};

        //通过obj2对象能读到x,也能修改x
        Object.defineProperty(obj2,'x',{
            //读
            get(){
                return obj.x;
            },
            //写
            set(newValue){
                obj.x = newValue;
            }
        })
    </script>

コンソールの検証:

分析: 操作 x は obj を通じて取得でき、x は obj2 からも操作できます。

2. Vue のデータプロキシ

分析の概要 2:

vm は Vue のインスタンス化されたオブジェクトです。

1. Vue のデータプロキシ:

vm オブジェクト を使用して、データオブジェクト内の属性の操作(読み取り/書き込み)をプロキシします。

2.Vue でのデータプロキシの利点:

データ内のデータをさらに便利に操作

3.基本原則（重要）

Object.defineProperty()を通じて、データオブジェクト内のすべてのプロパティを Vue インスタンス化されたオブジェクト vm に追加します。VM に追加されるプロパティごとに、ゲッター/セッターを指定します。

getter/ setter 内のデータ内の対応するプロパティを操作 (読み取り/書き込み) します。data 属性値がハイジャックされ、_data に配置されます。

検証: data 属性値がハイジャックされ、_data に配置されます。

    <div id="app">
        <h2>学校名称:{
   
   {name}}</h2>
        <h2>学校地址:{
   
   {address}}</h2>
    </div>
    <script>
        let data = {
            name:'三院',
            address:'亚洲大陆中国'
        }
        const vm = new Vue({
            el:'#app',
            data:data
        })
        console.log(vm);
    </script>

    <div id="app">
        <h2>学校名称:{
   
   {name}}</h2>
        <h2>学校地址:{
   
   {address}}</h2>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                name:'三院',
                address:'亚洲大陆中国'
            }
        })
        console.log(vm);
    </script>