解釋:函數式組件就是函數是組件 函數式組件與普通組件的區別 1.函數式組件需要在聲明組件是指定 functional 2.不需要實例化，所以沒有this,this通過render函數的第二個參數來代替 3.沒有生命周期鈎子函數，不能使用計算屬性，watch 4.不能通過$emit 對外暴露事件，調用事件只能通過context.listeners.click的方式調用外部傳入的事件 5.因為函數式組件是沒有實例化的，所以在外部通過ref去引用組件時，實際引用的是HTMLElement 6.函數式組件的props可以不用顯示聲明，所以沒有在props里面聲明的屬性都會被自動隱式解析為prop,而普通組件所有未聲明的屬性都 解析到$attrs里面，並自動掛載到組件根元素上面(可以通過inheritAttrs屬性禁止) 優點 1.由於函數式組件不需要實例化，無狀態，沒有生命周期，所以渲染性能要好於普通組件 2.函數式組件結構比較簡單，代碼結構更清晰 業務場景 比如一些詳情頁面，列表界面等，它們有一個共同的特點是只需要將外部傳入的數據進行展現，不需要有內部狀態，不需要在生命周期鈎子函數里面做處理，這時候你就可以考慮使用函數式組件。 聲明1: 通過JSX的方式 export default { // 通過functional屬性指定組件為函數式組件 functional: true, // 組件接收的外部屬性 props: { avatar: { type: String } }, /** * 渲染函數 * @param {*} h * @param {*} context 函數式組件沒有this, props, slots等都在context上面掛着 */ render(h, context) { const { props } = context if (props.avatar) { return <img src={props.avatar}></img> } return <img src="default-avatar.png"></img> } } 該實例中，定義了一個頭像組件，如果外部傳入頭像，則顯示傳入的頭像，否則顯示默認頭像。上面的代碼中大家看到有一個 render 函數，這是Vue中JSX的寫法 聲明2: 通過template的方法,僅支持Vue2.5+版本 <!--在template 上面添加 functional屬性--> <template functional> <img :src="props.avatar ? props.avatar : 'default-avatar.png'" /> </template> <!--注意,可以省略聲明props-->