Meggunakan Vue反応性

Duniaフロントウェブウェブ発展、パティSudah TidakがDengan namaを解雇しているBagi - anda Yang Berkecimpungディは、アウノーVueに反応します.Dua図書館ヤンPalingポピュラーサントini untuk membangun aplikasiウェブモダン.
パラPenggemarフレームワークvue pun pastinya sudah tahu bahwa tidak lama lagi vue akan merilis versi 3Versi bari ini tidak hanya menambahkan fitur baru,Tapi benar benarはdari awal(lebih lanjut)を書き換えるhttps://increment.com/frontend/making-vue-3/ ).
サラサチュルFucur Baru di Vue 3 Yang Mungkin Paling Banyak disorot adalahComposition API チュートリアルでは、カルティ・マッゲンガランの作品を紹介します.Namunハルヤンlebih menarik bagi saya pribadi adalahモデルreaktivitas baryangヤンsama charali berbeda dengan versi sebelumnya
レビMahariknya Lagi、modul reaktivitas ini dibuat padaパッケージterpisah、ヤンartinya tentu satuのbisa北paakai padaのaplikasi - lain tanpa harus menggunakanフレームワークvue.
Nah Karena saya sama sama menyukaiはダンVue,Jadi Saya Memutuskan Untuk Mencoba Modulを反応させる@vue/reactivity Paada Aplikasi Yang dibuat Menggunakanは反応する
Tujuan AhhirダリTulisan INI ADALAH Membabは、Bagaimana Kita Bisa MemutasiデータタンパKehilangan Reaktivitas DariにDengan Menggunakanパッケージ＠Vue/反応性に反応します.カラseperti ini bukanlah hal baru、タピmobx-react (Dengan観測可能なダリモブ).

mutable対不変の

変異性adalah perbedaan mendasar‐taraはdengan vueに反応する反応Memilih Jalur完全な不変のデータ、sedangkan vue memilih jalur mutableデータ.
lalu apa perbedaannya?
Sebelumnya‐Ka‐bahas Dulu Setkit Tentang宣言プログラミングDengan図書館AATUフレームワーク現代、ウェブ開発者Tidak Lagi Perlu Memikirkan Bagaimanaは、DOMを更新します.cukup dengan mendeklarasikan apa yang dimau,selebihnya mengenaiはDOM Dan Bagaimana Terjadinya Ahan Diatur OlehライブラリYang Dipakai(Menjelaskanya dengan lebih baik)を更新した.
Anatu Vue Ahan Mendeteksi Perubahanデータ、ダンKemudian MelakukanペーバハンYang Sesuai Pada UIに反応してください.Dan ini terjadi terus menerus secara otomatisATAU DalamカタMlain、Komponen UI Bersifat Reaktif Terhadap Perubahanデータ.
nah,di sini lah perbedaan tara immutability nyaはdengan変異性vueを反応させる.反応DenganカラYang Sangat Sederhana Mendeteksi perubahanデータMenggunakanObject.is . イトゥラMengapa kode di bawah tidak akan berjalan sesuai yang diharapkan

// in react component

const [name, setName] = useState({first: 'John', last: 'Doe'})

const handleChange = (event) => {
  name.first = event.target.value
}

ケチカアンダMelakukan Modsi Terhadapデータ名前空間Kode Diatasは、Tidak Ahan Melihat Luubahan(sehingga rerender pun tidak akan pernah terjadi)に反応します.Karenaオブジェクト名Masih MerupakanオブジェクトYang Sama Dengan sebelumnya.
Vue Menggunakan Cara Berbeda Yang Levh Kompleks Untuk Mendeteksi Perubahan Datadokumentasi resminya ). INININYA adalahデータpada vue bisa dimutsi,ダンdengan cerdas vue akan mendeteksi perubahan kemudian melakukan更新ヤンセーセイ

遊び始めましょう

Aplikasiヤンアカ北ブットadalah aplikasiカウンタdengan fitur増分ダンdecrement,serta ada satu kolom入力teks.
スクロールKe Paling Bawah Jika - anda Mu Langsung Melihatのソースコード

npm install @vue/reactivity

Pertama Ka Akan buat sebuah fungsi - hoc bernamaのセットアップYang Levh Kurang Berfungsi sama denganセットアップpada組成API vuePenggunaanya Akan Seperti ini :

import React, { useMemo } from 'react';
import { reactive, ref } from '@vue/reactivity';

const setup = (setupFn) => (Component) => (props) => {
  const setupProps = useMemo(setupFn, []);

  // our little trick here

  return <Component {...props} {...setupProps} />;
};

const App = (props) => {
  // This is the react component
};

export default setup(() => {
  const count = ref(0);
  const name = reactive({ first: '' });

  return { count, name };
})(App);

FungsiセットアップAkan Memasukkanリターン値dari setupfn sebagai小道具pada komponen.Di sini北gunakan usememo寒天インコカシHanya Terjadi Skali Ktikaは、Sajaを取り付けます.
<翻訳>ナハネ,セカラン・バガマナ・カニヤーナ・アントゥーク"Memaksa "
@ vue/反応性menyediakan fungsiは、Yang Fungsinya Adalah Melakukan「Sesuatu」(Dengan Meng呼び出しcallback Yang Digberkan)Setiapカリ値Reaktif Yang Dipakai di Dalam Fungsi itu DiModsi.効果的な反応は、反応します.Jangan Lupa Untuk Menghentikan効果Ketika Komponen di unmout dengan me return sebuah fungsi untuk stop

import React, { useMemo } from 'react';
import { reactive, ref, effect, stop } from '@vue/reactivity';

const setup = (setupFn) => (Component) => (props) => {
  const setupProps = useMemo(setupFn, []);

  useEffect(() => {
    const reactiveEffect = effect(() => {
      // here we can do something to trigger rerender
    });

    return () => stop(reactiveEffect);
  }, [setupProps]);

  return <Component {...props} {...setupProps} />;
};

Untuk「Memaksa」Rerender Ka Akan buat Satu Yang Value Nya Akan di更新Ketika Terjadi Modsiデータ

const setup = (setupFn) => (Component) => (props) => {
  const setupProps = useMemo(setupFn, []);
  const [, setTick] = useState(0);

  useEffect(() => {
    const reactiveEffect = effect(() => {
      // Only one more thing to do here
      setTick((tick) => tick + 1);
    });

    return () => stop(reactiveEffect);
  }, [setupProps]);

  return <Component {...props} {...setupProps} />;
};

Oke , Tinggal satu Langkah Lagi
Sbelymnya Saya Katakan Bahwa fungsiは、Aken MengがコールバックYang Diberkan setiapカリ値を呼び出します.Terus Bagaimana Caranya Funsi Iini Tau Ada Modsiか
サバント・セダーハナ・セリカリSETIAP値YangはDalamnya Akan Secara Otomatis di Trackにdiaksesしますya、cukupはSajaをdiakses!

useEffect(() => {
  const reactiveEffect = effect(() => {
    setupProps.count.value;
    setupProps.name.first;
    setTick((tick) => tick + 1);
  });

  return () => stop(reactiveEffect);
}, [setupProps]);

Karena di Dalam Komponen北阿寒Menggunakan値カウントダン名.第一に、DUA値INI PELUは、テルレビタダハルディDalam Fungsi影響寒天Komponen Bisa Melacak ModsiダンMelakukan Rerender SeitiapカリAda Perubahanをdiaksesします.
オーク、Cara Diatas Sebenarnya Sudah“ベナール”.Tapi Akan Mengakibatkanエラーなしで使用されない式padaリンタ、ダンjuga membuat fungsiセットアップhanya bisa dipakai untuk satu komponen ini saja
Shelarang mari Kita Generalisasi Menjadi fungsi access Yang Secara Reksif Ahan Mengakses setiap Properti di Dalam Object

import React, { useState, useEffect, useMemo } from 'react';
import { reactive, ref, isRef, effect, stop } from '@vue/reactivity';

const access = (object) => {
  if (isRef(object)) {
    access(object.value);
  } else if (typeof object === 'object') {
    for (let key of Object.keys(object)) {
      access(object[key]);
    }
  }
};

const setup = (setupFn) => (Component) => (props) => {
  const setupProps = useMemo(setupFn, []);
  const [, setTick] = useState(0);
  useEffect(() => {
    const reactiveEffect = effect(() => {
      access(setupProps);
      setTick((tick) => tick + 1);
    });

    return () => stop(reactiveEffect);
  }, [setupProps]);

  return <Component {...props} {...setupProps} />;
};

Akhirnya Sekarang di Dalam Komponenは、北Bisa Melakukan最新データを反応させます.Perhatikan onchange pada入力ダンonclick padaボタン.

function App({ count, name }) {
  return (
    <div>
      <input
        placeholder="Input your name"
        onChange={(e) => (name.first = e.target.value)}
      />
      <div>
        <div>Hi, {name.first}</div>
        <div>{count.value}</div>
        <div>
          <span>
            <button type="button" onClick={() => count.value--}>
              Decrement
            </button>
          </span>
          <span>
            <button type="button" onClick={() => count.value++}>
              Increment
            </button>
          </span>
        </div>
      </div>
    </div>
  );
}

世界的な状態管理Menggunakan
ソースコード:

アーメディ / 反応例におけるVue反応性

CodeDandbox :