摘要：發(fā)明了，利用語法來創(chuàng)建虛擬。然而，對持久化實例的缺乏也意味著函數(shù)式組件不會出現(xiàn)在的組件樹里。這個很有用，當(dāng)你在父組件給子組件綁定事件時就需要這個了。之前考慮過用動態(tài)組件來切換，但是放棄了，因為沒有直觀啊。另外推薦大家多用函數(shù)式組件提高性能。

JSX就是Javascript和XML結(jié)合的一種格式。React發(fā)明了JSX，利用HTML語法來創(chuàng)建虛擬DOM。當(dāng)遇到<，JSX就當(dāng)HTML解析，遇到{就當(dāng)JavaScript解析.

想折騰一下唄,開玩笑.最開始是因為近期在學(xué)習(xí)react,在里面體驗了一把jsx語法,發(fā)現(xiàn)也并沒有別人說的很難受的感覺啊,于是就想嘗試在vue中也試下,廢話不多說,先來用代碼來看下兩者的區(qū)別吧.

ps:vue中大部分場景是不需要用render函數(shù)的,還是用模板更簡潔直觀.
 ## 使用template

// item.vue

item組件中就是接收父組件傳過來的id值來顯示不同的h標(biāo)簽,v-if可以說用到了"極致",而且寫了很多個冗余的slot

## 使用render函數(shù)和jsx

// item.vue

再加上父組件來控制props的值。父組件不做對比還用傳統(tǒng)的template格式，

// list.vue

運行后頁面就渲染出了h1 or h2 or h3標(biāo)簽，同時slot也只有一個，點擊切換props的值，也會顯示不同的h標(biāo)簽。第二種寫法雖然不是很直接，但是省去了很多冗余代碼，頁面一下清爽了很多。
## 沒了v-if,v-for,v-model怎么辦？
不要著急，這些指令只是黑魔法，用js很容易實現(xiàn)。

v-if

  render(){
       return (
         

           {this.show?"你帥":"你丑"}
         
       )
     }

寫三元表達(dá)式只能寫簡單的，那么復(fù)雜的還得用if/else

   render(){
        let ifText
        if(this.show){
            ifText=
你帥
        }else{
            ifText=
你丑
        }
        return (
          

            {ifText}
          
        )
      }

v-for

     data(){
        return{
          show:false,
          list:[1,2,3,4]
        }
      },
      render(){
        return (
          

            {this.list.map((v)=>{
              return 
{v}
            })}
          
        )
      }

在jsx中｛｝中間是沒辦法寫if/for語句的只能寫表達(dá)式，所以就用map來當(dāng)循環(huán)，用三元表達(dá)式來當(dāng)判斷了

v-model

最近在幫公司面試招人發(fā)現(xiàn)v-model很多人都不知道語法糖是什么？然后有些人說我可以用原生js實現(xiàn)，但是他們竟然不知道在vue中怎么實現(xiàn)，好吧，兩個點：傳值和監(jiān)聽事件改變值。

很簡單，只需要導(dǎo)入進(jìn)來，不用再在components屬性聲明了，直接寫在jsx中比如

來看下面的寫法

render (h) {
  return (
    

    
  )
}

上面有個地方需要注意，當(dāng)給自定義組件綁定事件時用nativeOnClick,而模板格式是用
@click.native ，另外當(dāng)用到給函數(shù)式組件綁定事件時就有點小坑了下面說。

函數(shù)式組件無狀態(tài)，無this實例，下面是vue文檔中提到的一段話：

因為函數(shù)式組件只是一個函數(shù)，所以渲染開銷也低很多。然而，對持久化實例的缺乏也意味著函數(shù)式組件不會出現(xiàn)在 Vue devtools 的組件樹里。

我個人理解因為沒了狀態(tài)(data)，少了很多響應(yīng)式的處理，還有生命周期等過程會提高速度和減少內(nèi)存占用吧？

函數(shù)式組件也可以在模板格式中用只需要這樣