SOURCE

// https://github.com/jsebrech/tiny-signals
import { signal, computed } from 'https://ax.minicg.com/tiny-signals.es.js'
const { log, dir, table, clear, warn, error } = console; clear();

const input1 = document.getElementsByName('name')[0]
const input2 = document.getElementsByName('subname')[0]
const textarea = document.getElementsByName('textarea')[0]
const btn1 = document.getElementsByName('btn1')[0]
const btn2 = document.getElementsByName('btn2')[0]

const name = signal('Jane');
const subname = signal('Doe');

// 第二个参数代表只监听[name, subname]这些依赖的变化
const fullName = computed(() => `${name}~${subname}`, [name, subname])

// 用于取消监听dispose()
const dispose = reg()

function reg() {
    return fullName.effect(() => {
        input1.value = name.value
        input2.value = subname.value
        textarea.value = fullName.value
    })
}

input1.onkeyup = () => name.value = input1.value
input2.onkeyup = () => subname.value = input2.value

name.value = '狂徒';
subname.value = '张三';

name.addEventListener('change', ()=>log(`name = ${name.value}`))
subname.addEventListener('change', ()=>log(`subname = ${subname.value}`))

btn1.addEventListener('click', e => dispose())
btn2.addEventListener('click', e => reg())

<div class="container" style="padding:2rem 0;">
    <h2>Tiny-Signals</h2>
    <input name="name" type="text">
    <input name="subname" type="text">
    <textarea name="textarea" disabled></textarea>
    <div style="display:flex; gap:12px;">
        <button name="btn1">销毁监听信号</button>
        <button name="btn2">重新注册监听</button>
    </div>
</div>