minimal-reactive

Vue 3のリアクティビティをスクラッチで書いてみる試み

リアクティビティサンプルコード

reactive

const product = reactive({ price: 100, quantity: 2 })
let total = 0
effect(_ => total = product.price * product.quantity)
// 200になるはず
console.log(total)
// setterが呼ばれるたびにtrigerが実行され、effectを再実行する => totalが変わる
// reactive effect
product.quantity = 5
// 500になるはず
console.log(total)

ref

const counter = ref(1)
let sum
effect(() => {
  sum = counter.value
})
console.log(sum) // sum = 1のはず
counter.value += 1
console.log(sum) // sum = 2になるはず

環境構築

$ npm i

webpack dev serverの起動

$ npm run serve

画面イメージ

リファレンス

チュートリアル、解説

• Reactivity in Depth
• Reactivity in Vue 3 - How does it work?
• Vue 3 Reactivity - Proxy and Reflect

本家ソースコード

• @vue/reactivity