ドキュメンテーション
ディレクトリ
- compile - render function
- global-api - mixin
- instance - lifecycle event
- observer
- vdom virtual dom
- サーバサイドレンダリング
- sfc単一ファイル、Vueからjsへのコンパイル
構築
ランタイムのみ(webpack vue-loader .vue.js) ランタイムコンパイラ(runtime.レッスン)
vue
エントリ :core/index
レスポンシブの原則
Definition:ユーザーの操作やデータの変更により、ページが再レンダリングされること。
コア関数：Object.defineProperty(obj, prop, descriptor)、objはプロパティを定義するオブジェクト、propは定義または変更するプロパティの名前、descriptorは定義または変更するプロパティの記述子。ゲッターとセッターを持つことは、それがレスポンシブ・オブジェクトであることを意味します MDN
オブザーバーオブジェクトのソースコード定義
export class Observer {
value: any;
dep: Dep;
vmCount: number; // number of vms that have this object as root $data
}
ゲッター：依存関係の収集 セッター：ディスパッチ更新
質問2は？
- 配列テンプレートの更新
- Vueの修正オブジェクトテンプレートが更新されない理由
ゲッター
- 依存関係のコレクション
- トリガー条件
- mountComponent,
質問1が出されています：
- どのDOMを修正するか
- 効率とパフォーマンスの変更
- データを変更するたびにDOMを操作しなければならないのですか？
質問です：
- Vue computed レスポンシブとウォッチの違い
- Vue v-model
- イベントバスの書き方
- 計算属性の本質computed watcher
- listen属性は基本的にユーザーウォッチャーであり、deep、sync、immediateをサポートしています。
- 計算属性は、値が他のレスポンシブオブジェクトや計算属性に依存するテンプレートのレンダリングに適しています。 リスニング属性は、複雑なビジネスロジックを完了させるために値の変更をリスニングするのに適しています。
Vue router
vue-routerの手書き シンプルなvueルーターの実装方法
この時点で、シンプルなvue-routerができあがり、完全なコードは以下のようになる：
class VueRouter {
constructor (Vue, options) {
this.$options = options;
this.routeMap = {};
this.app = new Vue({
data: {
current: '#/'
}
});
this.init();
this.createRouteMap(this.$options);
this.initComponent(Vue);
}
// イベントをバインドする
init () {
window.addEventListener('load', this.onHashChange.bind(this), false);
window.addEventListener('hashchange', this.onHashChange.bind(this), false);
}
// ルートマッピング表
createRouteMap (options) {
options.routes.forEach(item => {
this.routeMap[item.path] = item.component;
});
}
// コンポーネントを登録する
initComponent (Vue) {
Vue.component('router-link', {
props: {
to: String
},
template: '<a :href="to"><slot></slot></a>'
});
const _this = this;
Vue.component('router-view', {
render (h) {
var component = _this.routeMap[_this.app.current];
return h(component);
}
});
}
// 現在のハッシュ文字列を取得する
getHash () {
return window.location.hash.slice(1) || '/';
}
// 現在のパスを設定する
onHashChange () {
this.app.current = this.getHash();
}
}
レスポンシブの原則
よくできた記事：Vueソースコード解説I：Vueデータ・レスポンシブの原則
