Vue3.2中的expose是啥？有什麼用？

Vue3.2 中新出的 expose 是做啥用的？以下這篇文章帶大家好好了解下Vue3.2的expose工具，希望對大家有幫助！

隨著Vue 3.2的發布，一個新的組合工具提供給我們，叫做 expose。 （學習影片分享：vue影片教學）

你是否曾經建立過一個需要提供給範本一些方法和屬性的元件，但又希望這些方法對元件是私有的，不能被父類別呼叫？

如果你在開發一個開源的元件或函式庫，你有可能想保持一些內部方法的私有性。在Vue 3.2之前，這並不容易實現，因為所有在選項API中聲明的方法或資料等都是公開的，所以模板可以存取它。

組合API也是如此。我們從setup方法中傳回的所有東西都可以被父類別直接存取。

組合 API

讓我們來看一個實際的例子。想像一下，我們有一個元件，它創建了一個計數器，每一秒都會更新這個計數器。

** MyCounter.vue**

<template>
    <p>Counter: {{ counter }}</p>

    <button>Reset</button>
    <button>☠️</button>
</template>

<script>
import { ref } from &#39;vue&#39;

export default {
  setup () {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    return {
      counter,
      reset,
      terminate
    }
  }
}
</script>

從組合的角度來看，我希望父級元件能夠在需要時直接呼叫reset方法--但我希望保持terminate 函數和counter 的參考只對元件可用。

如果我們把這個元件實例化到一個父類別中，例如App.vue，並給它附加一個ref 引用，我們可以很容易地讓父類別呼叫reset 方法，因為當我們從setup 中傳回它時，它已經和terminate 一起被揭露了。

App.vue

<template>
  <mycounter></mycounter>

  <button>Reset from parent</button>
  <button>Terminate from parent</button>
</template>

<script>
import MyCounter from &#39;@/components/MyCounter.vue&#39;

export default {
  name: &#39;App&#39;,
  components: {
    MyCounter
  },
  methods: {
    reset () {
      this.$refs.counter.reset()
    },
    terminate () {
      this.$refs.counter.terminate()
    }
  }
}
</script>

如果現在運行這個，並點擊重置或終止按鈕，兩者都可以工作。

讓我們明確說明我們要向父類別暴露(expose)的內容，以便只有 reset 函數可用。

** MyCounter.vue**

<script>
import { ref } from &#39;vue&#39;

export default {
  setup (props, context) {
    const counter = ref(null)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      console.log(interval)
      clearInterval(interval)
    }

    context.expose({ reset })

    return {
      counter,
      reset,
      terminate
    }
  }
}
</script>

這裡，我們在setup函數中加入了props 和context參數。我們需要有可用的上下文，因為這是 expose 函數的位置。我們也可以這樣使用重構: { expose }。

接下來，我們使用context.expose 來宣告一個我們想要對實例化這個元件的父類別公開的元素物件；在這個例子中，我們只打算讓reset 功能可用。

如果我們再次執行這個例子，並點擊 "Terminate from parent" 按鈕，我們會得到一個錯誤。

Uncaught TypeError: this.$refs.counter.terminate is not a function

terminate 功能不再可用，我們的私有API現在也無法存取了。

選項API

上面我們在composition API 使用exponse，但在options API中也可以使用這個方法。我們可以把它改寫成如下。

//  MyCounter.vue


export default {
  created () { ... },
  data: () => ({ counter: null }),
  methods: {
    reset () { ... },
    terminate () { ... }
  },
  expose: ['reset']
}

注意，我們新增了一個新的選項API屬性expose，允許我們傳入一個數組，其中字串'reset'是我們公開的函數的名稱。

組合API 渲染功能

創建一個強大臉靈活的元件的方法是利用渲染函數的力量。這對Vue 3來說並不新鮮，但是隨著composition API的建立，我們現在可以靈活地從setup方法直接傳回組合API h 函數。

這就產生了一個問題，因為在我們的setup函數中，整個return語句只是包含元件正在建立的節點的h 方法。

如果在這個時候我們選擇向父類 expose 一些東西，我們就會遇到與我們之前看到的相反的問題。沒有任何東西被暴露，因為除了DOM元素，沒有任何東西被返回。

讓我們重寫 MyCounter.vue 元件來使用這個方法。

<script>
// The template has been deleted
import { ref, h } from &#39;vue&#39;

export default {
  setup (props, context) {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    // context.expose({ reset })

    return () => h(&#39;div&#39;, [
      h(&#39;p&#39;, `Counter: ${counter.value}`),
      h(&#39;button&#39;, { onClick: reset }, &#39;Reset&#39;),
      h(&#39;button&#39;, { onClick: terminate }, &#39;Terminate&#39;)
    ])
  }
}
</script>

注意，我們在頂部從Vue導入了 h，因為我們需要用它來創建我們的DOM元素。

為了說明問題，暫時註解了context.expose方法。

現在的 return 語句複製了我們先前的 <template></template> 的DOM結構，如果我們執行這個例子，我們能夠正確點擊元素上的重置和終止按鈕。

然而，如果我們現在點擊 "Reset from parent"按鈕，我們會遇到一個錯誤。

Uncaught TypeError: this.$refs.counter.reset is not a function

reset方法不再被揭露，因為它沒有被setup函數傳回。為了解決這個問題，我們需要取消對context.expose的調用，使其再次可用。

總結

新的 expose 方法是非常直覺的，而且很容易在我們的元件中實作。它清除了一些非常重要的組成問題，這些問題在過去甚至需要重寫一個完整的元件，所以即使它不是你日常使用的API，它也是值得收藏在我們資料夾中吃灰。

英文原文：https://www.vuemastery.com/blog/understanding-vue-3-expose/

【相關影片教學建議： vuejs入門教學、web前端入門】

以上是Vue3.2中的expose是啥？有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！