Vue 3.0 を実際に体験してみましょう | JD Logistics テクニカルチーム

1 はじめに

Vue 3.0 の正式リリースからしばらく時間が経ちましたが、2 月 7 日、Vue チームは Vue 3 が正式に新しいデフォルトバージョンになったことを正式に発表しました。最近触れた新しいプロジェクトも Vue 3.0 を使用して開発されているため、Vue 3.0 についてまとめて学習する必要があります。

2 はじめに

当初、Vue は単なるランタイムライブラリでした。しかし、長年の開発を経て、徐々に多くのサブプロジェクトを備えたフレームワークになりました。Vue のコアライブラリはレイヤーのみに焦点を当てているため、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。それでは、Vue 3.0 はどのような新しいパフォーマンスをもたらすのでしょうか?

書き換えられた仮想 Dom
コンパイルされたテンプレートの最適化
より効率的なコンポーネントの初期化
SSR速度が2～3倍になる
アップデートパフォーマンスが1.3～2倍向上
Vue 3 は 2 に比べてパフォーマンスが大幅に向上しているようです。エンドユーザーとして、コードがどのように実装されているかを見てみましょう。

3つの新機能

3.1 合成 API

Vue 2 は、オプション API (オプションスタイル API) を使用します。つまり、データ、メソッド、計算済み、および監視にそれぞれコードを記述します。ロジックを追加する必要がある場合、これらのオプションに繰り返しジャンプする必要があるため、コンポーネントの理解と読み取りが困難になります。Vue 3 には、統合された API のエントリポイントであるセットアップオプションが追加されました。同じロジックの問題に関連するコードを収集するので、関数ポイントを保守する必要があるときに、他のロジックを気にする必要がなくなります。

例えば

<template>
  <div>{{number}}</div>
  <button @click="add">Add</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const number = ref(0)  //ref()函数使变量变为响应式
    const add = () => {
      number.value++   //使用ref创建的响应式变量需要加.value
    }
    return {  //返回的变量和方法可以在模板中直接使用
      number,  
      add
    }
  }
}
</script>

データとメソッドのすべてのコンテンツをセットアップに入れているように見えますが、それほど違いはありません? 実際、セットアップのコンテンツを独立した関数に分割し、それぞれの関数が独立した関数を担当することもできます。このようにして、さまざまなコンポーネントで再利用し、コードを簡素化できます。これが、API の組み合わせの力です。

3.2 レスポンシブ API

3.2.1 参照

上記のコードでは、 ref を使用して応答性の高いオブジェクトを作成します。このオブジェクトは、js の基本型または参照型をパラメーターとして受け取り、value という名前のパラメーターのみを含む RefImp オブジェクトを返します。セットアップ関数で応答オブジェクトを使用したい場合は、.value を追加する必要があります。ただし、テンプレートでレンダリングされると、内部値は自動的に展開されるため、テンプレートに .value を追加する必要はありません。

Ref は基本型によく使用され、オブジェクトに ref が渡されると、内部でリアクティブに変換されて処理されます。

import { ref } from "vue";
const str = ref("");
const male = ref(true);

str.value = "new val";
console.log(str.value);  //new val

male.value = false;
console.log(male.value)  //fals

3.2.2 リアクティブ

リアクティブ関数は、オブジェクトや配列などの複雑なデータ型のみを受け入れ、プロキシオブジェクトを返します。Reactive は深いレベルで再帰的に行うことができます。つまり、展開された属性値が参照型であることが判明し、参照されると、reactive で再帰的に処理されます。また、プロパティは変更できます。Proxyはes6でオブジェクトを作成する際に使用されるプロキシ機能で、対象オブジェクトの追加、削除、変更、確認などの基本操作の横取りやカスタマイズを実現できます。

const p=new Proxy(target,handler) //target是proxy包装的目标对象，handler是一个以函数作为属性的对象

単純なシミュレーションは応答性を実装するためにリアクティブを実装します。

      const obj={a:1,b:2}
      const p=new Proxy(obj,{
          get(target,key){
            console.log(`p的${key}属性被访问了！`)
            return Reflect.get(target,key)
          },
          set(target,key,value){
            console.log(`p的${key}属性被修改了！`)
            return Reflect.set(target,key,value)
          },
          deleteProperty(target,key){
            console.log(`p的${key}属性被删除了！`)
            return Reflect.deleteProperty(target,key)
          }
        })

3.2.3 toRef

上記の紹介を通じて、ref は通常、基本型データの双方向バインディングの作成に使用され、reactive は通常、参照データ型の双方向バインディングの作成に使用されることがすでにわかりました。さらに、ref は複合型の双方向バインディングを作成することもできますが、reactive は基本型をプロキシすることはできません。例を見てみましょう:

<template>
  <div>{{user.name}}</div>
  <div>{{user.age}}</div>
  <div>{{user.sex}}</div>
  <button @click="changeInfo">更改个人信息</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const user = ref({name:'张三',age:'18',sex:'男'})  
    const changeInfo = () => {
      user.name.value='李四'
      user.age=20
      user.sex='女'
    }
    return {  
       user
    }
  }
}
</script>

上記のコードでは、user.name、user.age を使用してページにバインドしていますが、これを書くのは非常に面倒に感じますが、ユーザーを分解してテンプレートで直接使用することはできますか? 答えは「いいえ」です。そうすると、ユーザーの応答性が失われます。ただし、toRef を使用すると、構造化されていないデータを直接使用できます。toRefs は、リアクティブオブジェクトを、プロパティがすべて ref オブジェクトである通常のオブジェクトに変換するために使用されます。具体的な使い方は以下の通りです。

<template>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <div>{{sex}}</div>
  <button @click="changeInfo">更改个人信息</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const user = ref({name:'张三',age:'18',sex:'男'})  
    const changeInfo = () => {
      user.name.value='李四'
      user.age=20
      user.sex='女'
    }
    return {  
       ...toRefs(user)  //使用toRefs
    }
  }
}

3.3 応答性の高いリスニング

watch 関数は、特定のデータソースをリッスンし、コールバック関数で副作用を実行するために使用されます。デフォルトは遅延です。これは、リスニングソースデータが変更された場合にのみコールバックが実行されることを意味します。

watch(source,callback,[options])

ソース: 文字列、オブジェクト、関数、配列をサポートでき、リッスンする応答変数を指定するために使用されます。
callback: 実行するコールバック関数
オプション: オプション、サポートディープ、即時、およびフラッシュ

単一のデータソースをリッスンする使用法:

import { reactive, ref, watch } from "vue";

const state = reactive({
  number:0,
  id:'01'
});
//侦听reative对象
watch(
  () => state.number,
  (newvalue, oldvalue) => {
    console.log(newvalue, oldvalue); //1 0
  }
);
state.number++;

const count = ref(0);
//侦听ref对象
watch(count, (count, prevCount) => {
  console.log(count, prevCount, "watch"); //2 0
});
count.value = 2

複数のデータソースをリッスンする使用法:

import { reactive, ref, watch } from "vue";


const state = reactive({
  number:0,
  id:'01'
});
const count = ref(0);
watch([count,()=>{state.number}],([curcount,precount],[curnumber,prenumber])=>{
  console.log(curcount,precount)  //2 0
  console.log(curnumber,prenumber) //1 0
})
state.number++
count.value=2

マルチレベルのネストされた参照オブジェクトの場合、{deep:true} を使用して詳細な監視を有効にすることができます。それ以外の場合は、外層データの変更のみを監視できます。前述したように、デフォルトではクリア中のウォッチのコールバック関数は遅延しており、監視データが変更された場合にのみ実行されます。{immediate: true} を設定すると、コールバック関数をすぐに実行できます。

3.4 ライフサイクル

Vue2 には 8 つのライフサイクル関数があります。

作成前
作成した
マウント前
取り付けられた
更新前
更新しました
前に破壊する
破壊されました

vue3 では、新たにセットアップライフサイクル関数が追加されており、セットアップ実行のタイミングが beforeCreate ライフ関数より前なので、この関数ではインスタンスを取得できませんが、同時に命名を統一するために、beforeDestroy は beforeUnmount にリネーム、destroyed はアンマウントしてリネームするため、vue3 では以下のライフサイクル関数を備えています。

beforeCreate -> 不要
作成されました -> 必要ありません
beforeMount -> onBeforeMount
マウント済み -> onMounted
beforeUpdate -> onBeforeUpdate
更新済み -> 更新済み
beforeUnmount -> onBeforeUnmount
アンマウント -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered

4 まとめ

上記の知識の要約により、基本的にプロジェクト開発に対応できる Vue 3 についてさらに理解できました。より多くの変更点については、公式ドキュメントを確認したり、自分でソースコードを読んだりすることができますが、Vue 3 はより多くの新しい経験を私たちにもたらしてくれると信じています。

著者: JD Logistics 燕志廷

出典: JD Cloud 開発者コミュニティ Ziqshuo Tech