Vue データ内のプロパティをランダムに変更すると、ビューは更新されますか?

新しいVue({
  el: '#app',
  データ（） {
    戻る {
      a: 1、
      b: 2,
      c: 3,
      d: 4,
    };
  },
  作成された() {
    コンソールにログ出力します。
    this.b = 'aaa';
  },
  テンプレート: '<div>Hello World{{a}}{{b}}</div>',
});

定数キー = Object.keys(データ)
  定数プロパティ = vm.$options.props
  const メソッド = vm.$options.methods
  i = キーの長さとする
  (i--) {
    定数キー = キー[i]
    もしprops && hasOwn(props, key) であれば
      process.env.NODE_ENV !== 'production' && 警告(
        `データ プロパティ "${key}" はすでにプロパティとして宣言されています。` +
        `代わりにプロパティのデフォルト値を使用してください。`,
        仮想
      ）
    } そうでなければ (!isReserved(key)) {
      //プロキシオブジェクトのプロパティ proxy(vm, `_data`, key)
    }
  }
  // データを観察する
  観察(データ、true /* asRootData */)

観察(データ、true /* asRootData */);

// 観察する
定数キー = Object.keys(obj);
(i = 0 とします; i < keys.length; i++) {
  Reactive を定義します (obj、キー [i])。
}

// リアクティブを定義する
Object.defineProperty(obj, キー, {
  列挙可能: true、
  設定可能: true、
  取得: 関数reactiveGetter() {
    const value = getter ? getter.call(obj): val;
    // 重要なポイントはここです。後でテンプレートで属性が使用される場合、reactiveGetter関数が実行されます // Depクラスによって収集されます if (Dep.target) {
      console.log(`${key} プロパティは Dep クラスによって収集されます`)
      依存関係
      if (childOb) {
        childOb.dep.depend();
        Array.isArray(値)の場合{
          依存配列(値);
        }
      }
    }
    戻り値;
  },
  設定: 関数reactiveSetter(newVal) {
    const value = getter ? getter.call(obj): val;
    /* eslint は自己比較を無効にします */
    if (newVal === 値 || (newVal !== newVal && 値 !== 値)) {
      戻る;
    }
    if (セッター) {
      // 計算されたセット関数は次のとおりです。setter.call(obj, newVal);
    } それ以外 {
      val = 新しいVal;
    }
    childOb = !shallow && observe(newVal);
    // プロパティを変更すると、notify を呼び出してビューを非同期的に更新します。dep.notify();
  },
});

（vm.$options.el）の場合{
  vm.$mount(vm.$options.el);
}

Vue.prototype.$mount = 関数 (
  el?: 文字列 | 要素、
  水分補給?: ブール値
）： 成分 {
  el = el && クエリ(el);

  const オプション = this.$options;
  // template/el を解決し、レンダリング関数に変換します
  /**
   * レンダリング関数が存在するかどうかを確認しますか?存在しない場合は、テンプレートを解析します。テンプレート* Vue がページをレンダリングする場合、2 つの方法があります: 1. テンプレート、2. レンダリング。最終的には、すべてのテンプレート クラスをレンダリングを使用してレンダリングする必要があります。*/
  if (!options.render) {
    テンプレートを options.template とします。
    if (テンプレート) {
      if (typeof テンプレート === '文字列') {
        (template.charAt(0) === '#')の場合{
          テンプレート = idToTemplate(テンプレート);
          /* イスタンブールは無視します */
          process.env.NODE_ENV !== 'production' && !template) の場合 {
            警告(
              `テンプレート要素が見つからないか空です: ${options.template}`,
              これ
            );
          }
        }
      } それ以外の場合 (template.nodeType) {
        テンプレート = template.innerHTML;
      } それ以外 {
        process.env.NODE_ENV !== 'production' の場合 {
          warn('無効なテンプレートオプション:' + template, this);
        }
        これを返します。
      }
    } そうでなければ (el) {
      // テンプレートが存在しない場合は、デフォルトの HTML テンプレートを作成します。 template = getOuterHTML(el);
    }
  }
  // Vue.prototype.$mount を書き換え、最後にキャッシュされた mount メソッドを呼び出して $mount のマウントを完了します。 return mount.call(this, el, hydrating);
};

const { render, _parentVnode } = vm.$options;
vnode = render.call(vm._renderProxy、vm.$createElement);