意外と知られていないVue.jsのRender Functionを紹介する - Money Forward Developers Blog

はじめに こんにちは。クラウド勤怠でエンジニアをしていますkatuoです。今回は意外と知られていないVue.jsの「Render Function」を紹介します。 Render Functionのメリット・デメリット メリット JavaScriptの力をフル活用して、プログラマティックにVue Componentを記述できる ボイラープレートを減らすことができる Vue.js固有の条件付きレンダリングを使わずDOM構造を記述できる デメリット DOM構造が複雑になるとコードの可読性・保守性が低下しやすい Render Functionとは 一般的なVue.jsのコードと言うと、以下のようなtemplate構文を使ったコードが広く知られているかと思います。 ※ 以下のコードはVue 3系のものです <script setup> import { ref } from "vue"; const

[reboot_in]

“活用できる場面としてコンポーネントに渡されたpropsを監視して、それを元にコンポーネントを動的に変更したい場面などがあります。”