前言

最近組內(nèi)有一個(gè)分享提到了 Vue2 的 functional 組件，大致上是說(shuō)這個(gè)東西沒(méi)有生命周期，在渲染層面上，會(huì)減少很多的消耗，一番處理之后，首屏?xí)r間和內(nèi)存都能減少不少。

由此，我打算來(lái)好好學(xué)一下挖一下這個(gè)知識(shí)點(diǎn)。

functional 組件是什么？

Vue.js 中的 functional 函數(shù)化組件是一種特殊類型的無(wú)狀態(tài)組件，它不依賴于內(nèi)部狀態(tài)，只依賴于傳入的 props。這種組件沒(méi)有實(shí)例，也就是說(shuō)它們沒(méi)有 this 上下文。函數(shù)化組件的主要特點(diǎn)如下：

• 無(wú)狀態(tài)：函數(shù)化組件不包含響應(yīng)式數(shù)據(jù)或內(nèi)部狀態(tài)，它們只依賴于傳入的 props。
• 無(wú)實(shí)例：函數(shù)化組件沒(méi)有實(shí)例，因此沒(méi)有 this 上下文。
• 更高的性能：由于沒(méi)有實(shí)例和響應(yīng)式數(shù)據(jù)，函數(shù)化組件的渲染性能更高，適用于頻繁更新的場(chǎng)景。
• 簡(jiǎn)潔的定義：函數(shù)化組件使用 render 函數(shù)定義，不需要完整的 Vue 組件選項(xiàng)對(duì)象。

函數(shù)化組件的定義示例：

Vue.component('my-functional-component', {
  functional: true,
  props: {
    message: {
      type: String,
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement('div', context.props.message);
  }
});

functional函數(shù)化組件做比對(duì)是深度比對(duì)，會(huì)對(duì)對(duì)象深入的做對(duì)比，不是淺比較：

如果 props 對(duì)象外部不變，但內(nèi)部的參數(shù)發(fā)生變化，函數(shù)化組件會(huì)重新渲染。因?yàn)楹瘮?shù)化組件是無(wú)狀態(tài)的，它們只依賴于傳入的 props。當(dāng) props 的內(nèi)部參數(shù)發(fā)生變化時(shí)，Vue 會(huì)檢測(cè)到這些變化并重新渲染函數(shù)化組件。

Vue.component('my-functional-component', {
  functional: true,
  props: {
    userInfo: {
      type: Object,
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement('div', context.props.userInfo.name);
  }
});

特點(diǎn)

1.functional 函數(shù)化組件本身無(wú) watch/computed，這就導(dǎo)致我們不能像在普通 Vue 組件中那樣使用 watch 或 computed 屬性來(lái)監(jiān)聽(tīng)參數(shù)變化。因?yàn)楹瘮?shù)化組件沒(méi)有實(shí)例和響應(yīng)式數(shù)據(jù)，它們只依賴于傳入的 props。當(dāng) props 發(fā)生變化時(shí)，函數(shù)化組件會(huì)自動(dòng)重新渲染。

如果我們想要監(jiān)聽(tīng)怎么辦？

比較可行的辦法是：在父組件中監(jiān)聽(tīng) props 變化，并在適當(dāng)?shù)臅r(shí)機(jī)傳遞新的 props 給函數(shù)化組件。這樣，函數(shù)化組件會(huì)在接收到新的 props 時(shí)自動(dòng)重新渲染。

2.functional 函數(shù)化組件本身無(wú)實(shí)例，這會(huì)導(dǎo)致如下后果：

• 在函數(shù)化組件中，無(wú)法使用 this 訪問(wèn)組件實(shí)例，因?yàn)樗鼈儧](méi)有實(shí)例。
• 由于沒(méi)有實(shí)例，函數(shù)化組件無(wú)法使用 Vue 實(shí)例的方法和屬性，例如 $emit、$watch、$refs 等。
• 函數(shù)化組件沒(méi)有實(shí)例，因此無(wú)法使用生命周期鉤子函數(shù)，如 created、mounted、updated 等。
• 函數(shù)化組件沒(méi)有響應(yīng)式數(shù)據(jù)和內(nèi)部狀態(tài)，它們只依賴于傳入的 props。這意味著我們無(wú)法在函數(shù)化組件中使用 data、computed 和 watch 等選項(xiàng)。
• 在函數(shù)化組件中，我們需要通過(guò) context 對(duì)象訪問(wèn)插槽（slots）和作用域插槽（scoped slots），而不是使用 this.$slots 和 this.$scopedSlots。

使用如下：

Vue.component('my-functional-component', {
  functional: true,
  props: {
    message: {
      type: String,
      required: true
    }
  },
  render: function (createElement, context) {
    // 訪問(wèn) props
    const message = context.props.message;
    // 訪問(wèn)插槽
    const slots = context.slots();
    const defaultSlot = slots.default;
    // 訪問(wèn)作用域插槽
    const scopedSlots = context.scopedSlots;
    const customSlot = scopedSlots.customSlot;
    // 訪問(wèn)事件監(jiān)聽(tīng)器
    const listeners = context.listeners;
    const clickListener = listeners.click;
});

到此這篇關(guān)于淺聊一下Vue2中的functional組件的文章就介紹到這了,更多相關(guān)Vue2 functional組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論