Vue3.0

ソースコード構成の変更
- すべてのコードはTypeScriptで書かれています
- Monorepoを使用してプロジェクト構造を管理する
- すべての機能モジュールは、開発用に個別のパッケージに分割されており、個別に開発、テスト、およびリリースできます。
構成API

新しいAPIの90％は2.X互換です
パフォーマンスの向上

大幅に改善し、応答スタイルを書き直し、プロキシを使用すると、サーバー側のレンダリングのパフォーマンスが2〜3倍向上します
早く

パッケージ化せずにプロジェクトを直接実行するためのソリューション

異なるビルドバージョン

cjs
- vue.cjs.js
- vue.cjs.prod.js
グローバル
- vue.global.js
- vue.global.prod.js
- vue.runtime.global.js
- vue.runtime.global.prod.js
ブラウザ
- vue.esm-browser.js
- vue.esm-browser.prod.js
- vue.runtime.esm-browser.js
- vue.runtime.esm-browser.prod.js
バンドラー
- vue.esm-bundler.js
- vue.runtime.esm-bundler.js

パフォーマンスの向上

レスポンシブシステムアップグレード
コンパイルの最適化
ソースコード量の最適化
Vue.js2.xのレスポンシブシステムのコアであるDefineProperty
Vue.js3.0のProxyオブジェクトを使用してリアクティブシステムを書き直します
- 動的に追加された属性を監視できます
- 削除された属性を監視できます
- 配列のインデックスと長さのプロパティを監視できます
Vue.js 2.xは、静的ルートノードをマークすることでdiffのプロセスを最適化します
Vue.js 3.0では、すべての静的ルートノードがマークされてプロモートされます。差分をとる場合は、動的ノードのコンテンツのみを比較する必要があります。
- フラグメント（veturプラグインのアップグレード）
- 静的ブースト
- パッチフラグ
- キャッシュイベントハンドラ
梱包量を最適化する
- いくつかの珍しいAPIがVue.js3.0で削除されました
  - 例：インラインテンプレート、フィルターなど。
- ツリーシェーキングをサポートする

Vue.3.0jsレスポンシブレビュー

プロキシオブジェクトはプロパティモニタリングを実装します
マルチレベルの属性のネスト。動的に追加された属性を監視するために、デフォルトで属性にアクセスするプロセスで次のレベルの属性が処理されます。
デフォルトの監視属性の削除操作
デフォルトのリスニング配列のインデックスと長さのプロパティ
個別のモジュールとして使用できます

コアメソッド：

  - 主要依赖于 Proxy 对象，创建拦截器 handler， 设置 get/set/deleteProperty 实现属性监听

  - reactive 实现对象的监听

  - ref 实现基础数据类型的监听

  - toRefs 实现对象属性的监听

  - computed 实现计算属性 

  - effect 定义副作用函数

  - track 实现依赖收集

  - trigger 触发响应式

  - receiver 为当前的 proxy 对象 或者 继承 proxy 的对象

  - 响应式的过程中会将 监听的对象 存储在一个 targetMap(weakMap) 中,他的值是对应的响应式的集合，存放在 depsMap(Map) 中, dep 的值是一个 Set 集合，

  存储了对应的 effect，触发时只需要遍历 dep 即可。

構成API

RFC（Request For Comments）
- https://github.com/vuejs/rfcs·composition
RFC API
- https://composition-api.vuejs.org
デザインの動機
- オプションAPI
  - コンポーネントオプション（データ、メソッド、小道具など）を説明するオブジェクトが含まれています
  - オプションAPIは複雑なコンポーネントを開発し、同じ機能ロジックのコードは異なるオプションに分割されます
- 構成API
  - Vue.js3.0の新しいAPIセット
  - 関数ベースのAPIのセット
  - コンポーネントのロジックをより柔軟に編成できます

createApp

Vueオブジェクトの作成に使用

セットアップ

CompositionAPIへのエントリ

反応性

レスポンシブオブジェクトを作成する

toRefs

プロキシオブジェクトをトラバースして、プロキシオブジェクトのプロパティが応答するようにします

ref

基本データ型のレスポンシブオブジェクトを作成します

見る

ウォッチの3つのパラメータ
- 最初のパラメータ：監視するデータ
- 2番目のパラメーター：データの変更を監視した後に実行される関数。この関数には、新しい値と古い値の2つのパラメーターがあります。
- 3番目のパラメータ：オプションオブジェクト、深くて即時
時計の戻り値
- リスニングをキャンセルする機能

watchEffect

ウォッチ機能の簡易版であり、データの変化を監視するためにも使用されます
関数をパラメーターとして受け取り、関数内の応答データの変化を監視します

カスタム命令

2.xを表示


Vue.directive("editingFocus", {
    
    

  bind(el, binding, vnode, prevVnode) {
    
    },

  inserted() {
    
    },

  update() {
    
    },

  componentUpdated() {
    
    },

  unbind() {
    
    },

});



Vue.directive("editingFocus", (el, binding) => {
    
    

  binding.value && el.focus();

});

3.0を表示


app.directive("editingFocus", {
    
    

  beforeMount(el, binding, vnode, prevVnode) {
    
    },

  mounted() {
    
    },

  beforeUpdate() {
    
    },

  updated() {
    
    },

  beforeUnmount() {
    
    },

  unmounted() {
    
    },

});



app.directive("editingFocus", (el, binding) => {
    
    

  binding.value && el.focus();

});

研究23、Vue3.0研究ノート

Vue3.0

異なるビルドバージョン

パフォーマンスの向上

Vue.3.0jsレスポンシブレビュー

構成API

createApp

セットアップ

反応性

toRefs

ref

見る

watchEffect

カスタム命令

おすすめ