web前端：如何（安全地）使用Vue.js的jQuery插件

在同一個UI中使用jQuery和Vue.js不是一個好的選擇。如果你可以避免它，請盡量避免。你為了折騰自己，請把我上一句忽略。

你可能讀到這篇文章不是因為你想要用jQuery和Vue，而是你必須這麼做。也許客戶堅持使用一個特定的jQuery插件，那麼你將沒有時間為Vue重寫。

在本文中，我將演示如何將jQuery UI Datepicker插件添加到Vue項目。

?

與jQuery和Vue一起使用的問題

jQuery和Vue一起使用有哪些潛在的危險？

Vue是一個嫉妒的庫，你必須讓它完全擁有你給它的DOM補丁（由你傳遞給el的定義）。如果jQuery對Vue正在管理的元素進行更改，比如添加一個類到某個類中，Vue將不會意識到這個變化，並且會在下一個更新周期中覆蓋它。

解決方案：使用一個組件作為包裝

知道Vue和jQuery永遠不會共享DOM的一部分，我們必須告訴Vue封鎖一個區域並將其交給jQuery。

使用一個組件來包裝一個jQuery插件似乎是要走的路，因為：

我們可以利用生命周期鉤子來設置和拆卸jQuery代碼

我們可以使用組件介面通過道具和事件與Vue應用程序的其餘部分進行通信

組件可以選擇退出v-once更新

設置jQuery UI Datepicker

顯然你需要在你的項目中首先包含jQuery和jQuery UI庫。一旦你有了這些，datepicker只需要一個輸入元素自己附加到：

然後可以通過選擇它並調用方法來實例化它：

Datepicker組件

為了使我們的datepicker組件，模板將是這個輸入元素：

注意：這個組件應該只是插件的一個包裝。不要把你的運氣，給它的任何數據屬性或使用指令或slots。

實例化小部件

而不是給我們的輸入一個ID並選擇它，我們可以使用這個(this.el在組件被掛載之前是未定義的。

拆除

要拆除日期選擇器，我們可以按照類似的方法並使用生命周期鉤子。請注意，我們必須使用beforeDestroy來確保我們的輸入仍然在DOM中，因此可以被選中（它在destroy鉤子中是未定義的）。

通過props配置

為了使我們的組件可重用，最好允許自定義配置，比如用配置屬性dateFormat指定日期格式。我們可以用props做到這一點：

讓jQuery處理更新

讓我們說，而不是作為一個字元串傳遞你的dateFormat的props中，你把它作為你的根實例的數據屬性，即：

這將意味著dateFormat將是一個被動數據屬性。您可以在應用程序生命周期的某個時刻更新其值：

由於dateFormat prop是datepicker組件掛載掛鉤的依賴關係，因此更新它將觸發組件重新呈現。這不會很酷。 jQuery已經在輸入上設置了你的datepicker，現在正在用它自己的自定義類和事件監聽器來管理它。組件的更新將導致輸入被替換，因此jQuery的設置將被立即重置。

我們需要這樣做，以便反應數據不能觸發此組件中的更新...

v-once

v-once指令用於在組件有很多靜態內容的情況下緩存組件。這實際上使組件選擇退出更新。

這實際上是完美的使用我們的插件組件，因為它將有效地使Vue忽略它。這給了我們一些信心，jQuery將在應用程序的生命周期中對這個元素進行無阻的控制。

將數據從jQuery傳遞給Vue

如果我們無法檢索選擇的日期並在應用程序的其他地方使用它，那麼使用日期選擇器是沒有用的。讓我們這樣做，在一個值被選中後，它被列印到頁面。

我們將首先給我們的根實例一個日期屬性：

日期選擇器窗口小部件有一個onSelect回調，當選擇一個日期時被調用。然後，我們可以使用我們的組件通過自定義事件發出這個日期：

我們的根實例可以偵聽自定義事件並接收新的日期：