Render Functions

今天要介绍的是Render Functions

先来看一段官网对render function的介绍

Vue recommends using templates to build applications in the vast majority of cases. However, there are situations where we need the full programmatic power of JavaScript. That's where we can use the render function.

在官网中他建议我们在大部分的情况下还是使用template去建构HTML完成我们想要的网页，但从官网上我们可以知道有些时候我们需要靠很多JavaScript才能完成网页，而当遇到这种情况时，我们就可以使用render function这个函式去代替template

今天的范例是仿照官网上举的例子去实作的，从官网中的template写法可以看出如果没有在JavaScript上使用render function就需要去做很多if-else的判断式，去判断它是h1到h6的哪一个字体大小，判断它是哪个slot然後去插入它的标签，但是使用render function我们只需要使用'h' + this.level让它props进去我们在HTML的level这就会和利用判断是去判断h1到h6的效果一样，所以使用render function很明显的让我们在HTML上的程序码和判断式减少很多!当然大部分我们还是会使用template，所以Render Functions比较常使用的时机大概是在写部落格的时候吧!

Demo
github