vue 3公開の構想で0から最も簡略化されたvueを実現する(05-02更新)

名詞の解釈

ブラウザ標準:本稿ではes 6、css 3、h 5の総称として

なぜvueの実現を学ぶのか
私たちがvueを使うのは、現在の業界で最も優れたソリューションの一つであるためですが、先端技術案の反復と工業標準化の発展の波は、vueでゴールすることはありません.
jqueryは死んでいません.その遺伝子はブラウザの基準に注入されています.Webcomponent shadow domのインスピレーションは、vueとreactのvdom技術にも啓発されている.もちろんvueも進化していますが、vueのライバルはreactではなく、ブラウザの標準化プロセスであることを知っておく必要があります.Webcomponentが主流になると、私たちは今喜んでいるvdom技術も移行の使命を果たしました.
だから私たちは危機感と好奇心を持って、vueに依存してはいけません.Vueのブラックボックスで何をしたのかを明らかにする必要があります.同時に,tdd,エージェントモード,オブザーバーモード,パッケージング,デカップリングなどの多くの現代ソフトウェアエンジニアリングの方法と設計モードも学ぶことができる.
Vueソースはなぜ読みにくいのか

多くの機能

vueソースコードを読む目的は、まず、双方向バインド、vnodeレンダリングなど、一部のコアfeatureの実装を理解することです.Vueソースコードにはkeep alive、dynamic component、functional componentなど、多くの非コアコードが含まれています.これらは重要ではありません.私たちが一時的にその実現にあまり興味を持っていないだけで、これらのコードの干渉はコア部分の理解を阻害します.

後方互換

Vueソースコードには後方互換コードが多く含まれているが、ブラウザ標準が主流フレームワークからエッセンスを吸収し、主流ブラウザがブラウザ標準に近づくにつれて、vueがフレームワークとして担う責任はますます小さくなり、最も簡単な例を挙げると、ES 6のProxyで双方向バインドを実現することはVue 2よりも大きい.xではdefinePropertyのhackの作り方が簡潔です.Webcomponentが成熟すると、vueはvdomもしなくなります.だからvue 3の実現はvue 2より簡単になるに違いない.これはすでに公式に確定されている.私はvue 4の実現がもっと簡素になると判断したが、この傾向はvueが歴史の舞台を脱退するまで続いた.
なぜ0からvueを書くのか
vueの実装を学ぶ以上、vueのソースコードにはノイズが多く含まれており、整理しにくい.ネット全体を見渡すと、ソース分析の文章やチュートリアルが次々と出ているが、構想の多くはvueコードの複雑な細部に埋もれている.では、私たちはなぜ興味のない機能をやらず、careブラウザの互換性を持たず、最新の技術だけで、霧をかき分けて最も簡略化されたVueを書かないのでしょうか.
この項目はVue 3を押す.0公开のアイデアは、开発の方法をテストして、一歩一歩最も简単なVueを书いて、私はできるだけすべてのcommitが理解しやすいことを确保します.次の手順に従うことをお勧めします.Vueについてはっきり理解します.
テストドライバ開発～why?
ソフトウェアエンジニアリングでは、私の理解では、完全に上から下への設計(滝モデル)は、もう時代遅れの方法です.オペレーティングシステムレベルのエンジニアリングのような超大型コンピュータプロジェクトでも、マクロ上から下へ、ミクロ上下結合(敏捷開発)です.TDDは上下結合のプログラミング実践であり、各モジュールに対して、まずテスト用例を設計し、コードを書いて実現する.次のメリットがあります.

品質を制御し、回帰テストを容易にし、開発効率を高める

test caseすなわち文書

粗いトップレベルの設計後(製品設計と技術設計を含む)、下から上へプログラミングを開始することができ、移行設計

を回避することができる.
ステップ
tddは強力なtest case、すなわちドキュメントの遺伝子を持っているため、各ステップで何をしたかを理解するには、対応するtest caseコードを見るだけでよい.
次のステップはdiff形式で与えられ、必要なところはコメントが追加されます.大段全体の説明はdiffページの下部のコメントエリアに書かれ、あるコードに対するコメントが挿入されます.コメントとissueへようこそ.
ステージ1:Basic
この部分、私達は0から始めて、いくつかの基礎のfeatureを実現して、完備を求めません

TDD環境構築

Dataエージェント

$watch

を実現

htmlオリジナル要素レンダリング

method

をサポート

lifecycle

をサポート

htmlオリジナル要素イベントリスニング

mvvm

を実現

段階1成果:Basic Demo

npm run testを実行し、ポップアップブラウザページのDEBUGボタンをクリックすると効果が表示されます
フェーズ2:mvvmの整備
この部分では、vue 2を実現するためにmvvmを改善します.xのすべてのfeatureを実現し、vue 3を実現する.0公開の重要なfeatureは、vue 2で「Detection of property addition/deletion」という公式の言い方です.xでは$setが必要です.

[mvm]data深層object

をサポート

[mvm]dataでobjectが新規属性

をサポート

[mvm]dataでobjectは削除属性

をサポートする

[mvvm]array

をサポート

段階2成果:mvvm in depth demo

npm run testを実行し、ポップアップブラウザページのDEBUGボタンをクリックすると効果が表示されます

単純再構成および補足注釈

気持ちを整理して
フェーズ3:サポートコンポーネント

は、属性

をサポートします.

コンポーネントレンダリング

を実装

event&action

を実現
ステージ4:Computed&watch

計算属性

watch

を実現

再構築:優雅な実装エージェントと依存収集

$nextTick

を実現

Watcherスケジューリング

を実現
複数のdataを変更すると複数回renderがトリガーされる問題を解決するために

var cb = jasmine.createSpy('cb');

var vm = new Vue({
  data () {
    return {
      a:1,
      b:2,
    }
  },
  render (h) {
    cb()
    return h('p', null, this.a + this.b)
  }
}).$mount()

expect(cb).toHaveBeenCalledTimes(1)

vm.a = 10
vm.b = 11
setTimeout(_ => {
  expect(cb).toHaveBeenCalledTimes(2) // change 'a' and 'b' only trigger one render
  done()
})

Todo list

Patch

Scoped Slot

補足
virtual dom vs shadow dom
virtual domとshadow domが混同されているので、誤解しないように2つの文章をお勧めします

develoger.com/shadow-dom-…

svelte.dev/blog/virtua…

将来のvueの発展には2つの可能性があります

はvirtual domもするかもしれませんが、virtual domが実際にレンダリングされるとweb componentになり、現在vueのscoped cssもshadow domに取って代わられます.

ですが、もう一つの可能性があります.virtual domの存在の意味は,操作domのオーバーヘッドが大きいことを考慮して,domに対してmergeを操作することである.しかし、shadow domを操作するのはずっと速くて、すべての私は未来のvirtual domに対してまだ疑いを持つ必要があるかどうか.

著者のその他の文章

ES 6類継承原理及び欠陥

転載先:https://juejin.im/post/5cbc7a06f265da03587bfad0