レスポンシブ原則をシミュレートするための基礎コードの Vue 実装の例

クラス Vue{
    コンストラクタ(オプション) {
        //1. 属性を通じてオプションにデータを保存します this.$options = options || {}
        this.$data = オプション.data || {}
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        //2. データのメンバーをゲッターとセッターに変換し、vue インスタンスに注入します this._proxyData(this.$data)
        //3. データの変更を監視するためにオブザーバーオブジェクトを呼び出す new Observer(this.$data)
        //4. コンパイラオブジェクトを呼び出して命令と差分式を解析する new Compiler(this)
    }
    //Vue のプロパティをゲッターとセッターに変換し、Vue に注入します。instance_proxyData(data){
        //dataObject.keys(data).forEach(key=>{ 内のすべての属性を走査します。
          //データ属性をvueインスタンスにグローバルに注入する Object.defineProperty(this, key, {
              列挙可能:true、
              設定可能:true、
              得る（）{
                データを返す[キー]
              },
              set(新しい値){
                if(newValue===データ[キー]){
                    戻る 
                }
                データ[キー]=新しい値
             }
        })    
      })
    }
}

クラスオブザーバー{
    コンストラクタ(データ) {
        this.walk(データ)
    }
    //walkメソッドはデータ内のすべての属性を走査します walk(data) {
        //1. データがオブジェクトかどうかを判定する if(!data || typeof data !=='object'){
            戻る 
        }
        //2. データオブジェクトのすべてのプロパティを走査します。Object.keys(data).forEach(key=>{
            this.defineReactive(データ、キー、データ[キー])
        })
    }
    //defineReactivece メソッドは、プロパティをゲッターとセッターに変換するためのレスポンシブ データを定義します。
    定義Reactive(オブジェクト、キー、値) {
        それを=これとする
        // 依存関係の収集と通知の送信を担当します。let dep = new Dep()
        // val がオブジェクトに渡された場合、オブジェクトのプロパティに getter メソッドと setter メソッドを追加します this.walk(val)
        オブジェクト.defineProperty(obj,キー,{
            列挙可能:true、
            設定可能:true、
            得る（）{
                // 依存関係を収集 Dep.target && dep.addSub(Dep.target)
                戻り値
            },
            set(新しい値){
                if(newValue==val){
                    戻る 
                }
                val=新しい値
                // 属性をオブジェクトに再割り当てする場合は、オブジェクトの属性に getter メソッドと setter メソッドを再度追加します // 例: 履歴データ vm.msg="Hello World" 変更後 vm.msg={a:'Hwllo World'}
                // このメソッドを再度呼び出して、ゲッターメソッドとセッターメソッドを vm.msg.a に再度追加します that.walk(newValue)
                //通知を送信する dep.notify()
            }
        })
    }
}

クラス Dep{
    コンストラクタ() {
        //すべてのオブザーバーを保存します this.subs=[]
    }
    // オブザーバーを追加 addSub(sub){
        if(sub && sub.update) {
            this.subs.push(サブ)
        }
    }
    //通知を送信するnotify(){
        this.subs.forEach(sub =>{
            サブ.更新()
        })
    }
}

クラスウォッチャー{
    コンストラクタ(vm,key,cb) {
        this.vm=vm
        //データ内の属性名 this.key=key
        //コールバック関数はビューの更新を担当します this.cb=cb
        //ウォッチャーオブジェクトをDepクラスの静的属性ターゲットに記録します
        依存先 = this
        //getメソッドをトリガーし、addSubが呼び出されます
        this.oldValue=vm[キー]
        依存関係ターゲット=null
    }
    // データが変更されたらビューを更新する update() {
        newValue = this.vm[this.key]とします
        if(this.oldValue === newValue){
            戻る
        }
        this.cb(新しい値)
    }
}