由于本文将会与vue3做比较，所以本文适合有vue3基础的读者

响应式

Solid的响应式函数包括:

• Signal - 相当于 ref 或 reactive

// vue
const count = ref(0)
// solid
const [count, setCount] = createSignal(0)
// 其中， count为getter， setCount为setter

• Memo - 相当于 Computed

// vue
const fullName = computed(() => `${firstName()} ${lastName()}`)
// solid
const fulName = createMemo(() => `${firstName()} ${lastName()}`)

• Effect- 相当于 watchEffect

// vue
watchEffect(() => console.log("The latest count is", count.value))
// solid 
createEffect(() => console.log("The latest count is", count()))

渲染

Solid 支持 JSX、标签模板字面量 和 Solid HyperScript 变体这 3 种模板形式, JSX为主流

// solid
import { render } from 'solid-js/web'
// 第一个参数为待渲染内容，第二个参数为挂载容器
render(() => <App />, document.querySelector('#main'))

// vue