手書きの Vue2.0 データハイジャックの例

npm で webpack をインストールします。webpack-cli webpack-dev-server -D

定数パス = require('path');
HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
モジュール.エクスポート = {
 エントリ: './src/index.js',
 出力: {
  ファイル名: 'bundle.js',
  パス: path.resolve(__dirname, 'dist')
 },
 解決する： { 
  モジュール:
  path.resolve(__dirname, '')、path.resolve(__dirname, 'node_modules')  
  ] 
 },
 プラグイン: [  
  新しいHtmlWebpackプラグイン({   
   テンプレート: path.resolve(__dirname, 'public/index.html')  
  }) 
 ]
}

'./init.js' から {initState} をインポートします。

関数 Vue (オプション) {
 this._init(options); // データの初期化}
Vue.prototype._init = 関数 (オプション) {
 var vm = options; // インスタンスを保存 vm.$options = options; // インスタンスをマウント initState(vm); // インスタンスの初期化 }

関数 initState (vm) {
 var options = vm.$options; // オプションを取得
 if (オプション.データ) {
  initData(vm); // ここで computed と watch を初期化する必要があるため、データを初期化します};

関数 initData (vm) {
 var data = vm.$options.data; // データを再割り当てします。ユーザー定義のデータは変更しません。
 data = vm._data = typeof data === 'function' ? data.call(vm) : data || {};
 for (var key in data) {
  proxyData(vm, '_data', key); // データの値を再割り当てします};
 observe(vm._data); //内部データを観察する}

関数 proxyData(vm, ターゲット, キー) { 
 Object.defineProperty(vm, キー, {  
   得る （） {   
   // インターセプションはここで行われます: vm.xxx => vm._data.xxx   
   vm[ターゲット][キー]を返します。  
  },  
  set(新しい値) {   
   // vm.xxx = yyy ===> vm._data.title = yyy   
   vm[ターゲット][キー] = 新しい値;  
  } 
 }) 
}
デフォルトの proxyData をエクスポートします。

関数 observe(データ) {
 if (typeof data !== 'object' || data = null) return;
 return new Observer(data); // アプリケーション型の場合は、オブザーバーを直接追加します} 

関数 Observer(データ) {
 Array.isArray(データ)の場合{
  // 配列データを処理します。_proto_ = arrMethods; 
 }
 それ以外 {
  //オブジェクトを処理 this.walks(data);
 }
}
Observer.prototype.walks = 関数 (データ) {
 let keys = Object.keys(data); // data の下のすべてのキーを取得します。これは依然として配列です。 for (var i = 0 ; i < keys.length ; i++) {  
  var キー = keys[i];  
  var 値 = データ[キー];  
  defineReactiveData(data, key, value); // それぞれレスポンシブデータを再生成します }}

関数defineReactiveData（データ、キー、値）{ 
 observe(value); // 次に子要素に再帰的に適用します。 
 Object.defineProperty(データ、キー、{  
  得る（） {   
   戻り値;  
  },  
  (新しい値) を設定する {   
   (newValue === value) の場合、戻り値:   
   value = newValue; // 変更をトリガーする } 
 }
 ）
};

'./config.js' から {ARR_METHODS} をインポートします。  
 // 7 つの配列メソッドのコレクション import observeArr from './observeArr.js';
var originArrMethods = Array.prototype, 
arrMethods = Object.create(originArrMethods); 
ARR_METHODS.map(関数(m) { 
 arrMethods[m] = 関数（）{  
  var args = Array.prototype.slice.call(arguments); // クラス配列を配列に変換 var rt = originArrMethods[m].apply(this, args);  
  var newArr;  
  スイッチ（m）{   
   ケース 'プッシュ':   
   'ushift'の場合:     
    新しい引数 = 引数;   
   ケース 'スプライス':    
    newArr = args.slice(2);    
    壊す;   
   デフォルト：     
    壊す; };  
  新しいArrと観察Arr(新しいArr);  
  rt を返します。 
  } 
}); 
 エクスポート { arrMethods }

「./observe」から observe をインポートします。
関数 observeArr (arr) { 
 (var i = 0 ; i < arr.length ; i++) の場合 {  
  observe(arr[i]); // 観察に戻ります。 
 }
}
デフォルトの observeArr をエクスポートします。