長期使用 jQuery，最近轉(zhuǎn)向 Vue 的開發(fā)者，或許會(huì)對(duì)兩者遷移過程感興趣。

首先要明確一點(diǎn)，我并非建議大家放棄 jQuery。雖然現(xiàn)在流行這種說法，幾年前我自己也寫過類似的文章（“我如何（不）使用 jQuery”）。如果 jQuery 能滿足你的需求，并且你的最終用戶也能順利使用你的網(wǎng)站，那就繼續(xù)使用它吧。

本指南主要面向那些擁有多年 jQuery 使用經(jīng)驗(yàn)，并希望了解如何在 Vue 中完成相同任務(wù)的開發(fā)者。因此，我將重點(diǎn)關(guān)注我認(rèn)為 jQuery 的“核心”用例。我不會(huì)涵蓋所有可能的特性，而是采用“我經(jīng)常用 jQuery 做 [X]”的方法，這可能更容易讓考慮學(xué)習(xí) Vue 的人產(chǎn)生共鳴。（順便說一句，還要注意，我編寫示例的方式只是一種完成任務(wù)的方法。jQuery 和 Vue 都提供了多種方法來實(shí)現(xiàn)相同的目標(biāo)，這是一件好事?。?/p>

因此，讓我們考慮一些我們可能會(huì)求助于 jQuery 的高級(jí)任務(wù)：

• 在 DOM 中查找元素（以便稍后對(duì)其進(jìn)行操作）
• 更改 DOM 中的內(nèi)容（例如，段落的文本或按鈕的類）
• 讀取和設(shè)置表單值
• 表單驗(yàn)證（實(shí)際上只是上述各項(xiàng)的組合）
• Ajax 調(diào)用和處理結(jié)果
• 事件處理（例如，單擊按鈕時(shí)執(zhí)行操作）
• 測(cè)量或更改元素的樣式

當(dāng)然，jQuery 的功能遠(yuǎn)不止這些，但這些用途（至少在我看來）涵蓋了最常見的用例。還要注意，上述列表中有很多交叉關(guān)聯(lián)。那么，我們應(yīng)該從逐一比較每個(gè)功能開始嗎？不，別著急。讓我們先介紹 Vue 應(yīng)用程序的主要區(qū)別。

定義 Vue 的“作用范圍”

當(dāng)我們將 jQuery 添加到頁面時(shí)，我們實(shí)際上是在 JavaScript 代碼中添加了一把瑞士軍刀，用于處理常見的 Web 開發(fā)任務(wù)。我們可以按照我們認(rèn)為合適的任何順序執(zhí)行任何用例。例如，客戶今天可能需要表單驗(yàn)證，然后在一個(gè)月左右的時(shí)間里，要求在網(wǎng)站的頁眉中添加一個(gè)基于 Ajax 的搜索表單。

Vue 在這方面有一個(gè)顯著的區(qū)別。在開始使用 Vue 項(xiàng)目時(shí)，我們首先定義要在 DOM 中關(guān)注的“區(qū)域”。因此，讓我們考慮一個(gè)簡單的原型網(wǎng)頁：

<header>
  花哨的頁眉內(nèi)容
</header>
<div id="sidebar">
  一些側(cè)邊欄內(nèi)容
</div>

<main>
  <p id="main-content">
    主要的網(wǎng)站內(nèi)容，非常重要的內(nèi)容……
  </p>
  <div id="loginForm">
    當(dāng)然還有登錄表單
  </div>
</main>

在典型的 jQuery 應(yīng)用程序中，我們可能會(huì)編寫代碼來處理頁眉、側(cè)邊欄和登錄表單等。沒什么大不了的：

$(document).ready(function() {

  $('header') // 做一些事情...

  $('#sidebar') // 做一些事情...

  $('#loginForm') // 做一些事情...

});

在 Vue 應(yīng)用程序中，我們首先指定要處理的內(nèi)容。假設(shè)我們的客戶首先要求向 loginForm 元素添加驗(yàn)證。我們的 Vue 代碼將指定這一點(diǎn)：

new Vue({
  el: '#loginForm',
  // 代碼在這里...
});

這意味著如果客戶后來決定向側(cè)邊欄添加一些內(nèi)容，我們通常會(huì)添加一個(gè)第二個(gè) Vue 應(yīng)用程序：

new Vue({
  el: '#loginForm',
  // 代碼在這里...
});

new Vue({
  el: '#sidebar',
  // 代碼在這里...
});

這是壞事嗎？絕對(duì)不是。我們立即獲得了封裝的好處。如果我們意外地使用了具有通用名稱的變量（我們都做過），我們不必?fù)?dān)心與代碼的其他部分發(fā)生沖突。當(dāng)客戶以后添加另一個(gè)請(qǐng)求時(shí)，像這樣將我們獨(dú)特的、邏輯的 Vue 代碼集分開，讓我們安心，不用擔(dān)心它們會(huì)互相干擾。

所以，這是一件好事。但是當(dāng)我第一次開始使用 Vue 時(shí)，它確實(shí)讓我停頓了一下?，F(xiàn)在，讓我們來看我們的用例。

在 DOM 中查找元素

你會(huì)發(fā)現(xiàn)另一個(gè)有趣或令人害怕的方面是如何“在 DOM 中查找元素”。這有點(diǎn)含糊，但讓我們考慮一個(gè)具體的例子。我們有一個(gè)按鈕，當(dāng)單擊它時(shí)，我們會(huì)讓某些事情發(fā)生。這是一個(gè)簡化的示例：

<button id="myButton">點(diǎn)擊我！</button>

$(document).ready(function() {

  $('#myButton').click(function() {
    alert(1);
  });

});

現(xiàn)在讓我們將其與 Vue 的實(shí)現(xiàn)方式進(jìn)行比較：

<div id="app">
  <button>點(diǎn)擊我！</button>
</div>

const app = new Vue({
  el: '#app',
  methods: {
    doSomething: function() {
      alert(1);
    }
  }
});

Vue 應(yīng)用程序比較冗長，但請(qǐng)注意，標(biāo)記之間如何直接連接操作（“click”）和將要調(diào)用的函數(shù)。Vue 的代碼與 DOM 沒有關(guān)聯(lián)（除了 el 部分，我們?cè)谄渲卸x它需要工作的地方）。這很容易成為最讓我信服 Vue 的事情之一——它更容易理解正在發(fā)生的事情。此外，我不必太擔(dān)心 ID 值和選擇器。如果我更改按鈕的類或 ID，我不需要返回到我的代碼中并擔(dān)心更新選擇器。

讓我們考慮另一個(gè)示例：查找和更改 DOM 中的文本。想象一下，單擊該按鈕后，現(xiàn)在會(huì)更改 DOM 另一部分的文本。

<button id="myButton">點(diǎn)擊我！</button>

$(document).ready(function() {

  $('#myButton').click(function() {
    $('#result').text('你點(diǎn)擊了我，謝謝！');
  });

});

我添加了一個(gè)新的 span，現(xiàn)在，當(dāng)單擊按鈕時(shí)，我們使用另一個(gè)選擇器來查找它，并使用 jQuery 實(shí)用程序方法來更改其內(nèi)部的文本。現(xiàn)在考慮 Vue 版本：

<div id="app">
  <button>點(diǎn)擊我！</button>
  <span>{{ resultText }}</span>
</div>

const app = new Vue({
  el: '#app',
  data: {
    resultText: ''
  },
  methods: {
    doSomething: function() {
      this.resultText = '你點(diǎn)擊了我，謝謝！';
    }
  }
});

在此示例中，我們使用 Vue 的模板語言（突出顯示的行）來指定我們要在 span 內(nèi)渲染一個(gè)變量，在本例中為 resultText?，F(xiàn)在，當(dāng)單擊按鈕時(shí)，我們更改該值，span 的內(nèi)部文本將自動(dòng)更改。

順便說一句，Vue 支持 v-on 屬性的簡寫，因此示例中的按鈕可以用 @click="doSomething" 來代替。

讀取和寫入表單變量

處理表單可能是我們可以用 JavaScript 完成的最常見和最有用的事情之一。甚至在 JavaScript 之前，我早期的大部分“Web 開發(fā)”都是編寫 Perl 腳本以處理表單提交。作為接受用戶輸入的主要方式，表單一直對(duì) Web 至關(guān)重要，并且在相當(dāng)長的一段時(shí)間內(nèi)可能仍然如此。讓我們考慮一個(gè)讀取一些表單字段并設(shè)置另一個(gè)字段的簡單 jQuery 示例：

= 求和

$(document).ready(function() {
  let $first = $('#first');
  let $second = $('#second');
  let $sum = $('#sum');
  let $button = $('#sumButton');

  $button.on('click', function(e) {
    e.preventDefault();
    let total = parseInt($first.val(), 10)   parseInt($second.val(), 10);
    $sum.val(total);
  });
});

這段代碼演示了 jQuery 如何通過 val() 方法讀取和寫入。我們最終從 DOM 中獲取四個(gè)項(xiàng)目（所有三個(gè)表單字段和按鈕），并使用簡單的數(shù)學(xué)運(yùn)算來生成結(jié)果?，F(xiàn)在考慮 Vue 版本：

= 求和

new Vue({
  el: '#myForm',
  data: {
    first: 0,
    second: 0,
    sum: 0
  },
  methods: {
    doSum: function() {
      this.sum = this.first   this.second;
    }
  }
})

這引入了一些有趣的 Vue 快捷方式。首先，v-model 是 Vue 如何在 DOM 和 JavaScript 中的值之間創(chuàng)建雙向數(shù)據(jù)綁定的方式。數(shù)據(jù)塊變量將自動(dòng)與表單字段同步。更改數(shù)據(jù)，表單就會(huì)更新。更改表單，數(shù)據(jù)就會(huì)更新。.number 是一個(gè)標(biāo)志，指示 Vue 將表單字段的繼承字符串值視為數(shù)字。如果我們省略它并進(jìn)行加法運(yùn)算，我們將看到字符串加法而不是算術(shù)運(yùn)算。我已經(jīng)使用 JavaScript 近一個(gè)世紀(jì)了，仍然會(huì)搞砸這個(gè)。

另一個(gè)巧妙的“技巧”是 @click.prevent。首先，@click 定義按鈕的點(diǎn)擊處理程序，然后 .prevent 部分阻止瀏覽器提交表單的默認(rèn)行為（相當(dāng)于 event.preventDefault()）。

最后一點(diǎn)是綁定到該按鈕的 doSum 方法的添加。請(qǐng)注意，它只是使用數(shù)據(jù)變量（Vue 在 this 范圍內(nèi)提供）。

雖然這主要是我個(gè)人的感受，但我真的很喜歡在 Vue 中編寫時(shí)腳本中缺少查詢選擇器，以及 HTML 如何更清晰地說明它在做什么。

最后，我們甚至可以完全擺脫按鈕：

=

new Vue({
  el: '#myForm',
  data: {
    first: 0,
    second: 0
  },
  computed: {
    sum: function() {
      return this.first   this.second;
    }
  }
})

Vue 的一個(gè)更酷的特性是計(jì)算屬性。它們是虛擬值，可以識(shí)別其派生值何時(shí)更新。在上面的代碼中，只要兩個(gè)表單字段中的任何一個(gè)發(fā)生更改，sum 就會(huì)更新。這在表單字段之外也能工作。我們可以像這樣渲染 sum：

總計(jì)是 {{sum}}。

使用 Ajax

jQuery 使使用 Ajax 變得多么容易，這值得稱贊。事實(shí)上，我可以說我“原生”的方式使用 Ajax 的次數(shù)可能總共只有一次。（如果您好奇，您可以查看 XMLHttpRequest 的規(guī)范，并且可能會(huì)很高興您自己避免了它。）jQuery 的簡單 $.get(...) 方法在很多情況下都有效，當(dāng)需要更復(fù)雜的東西時(shí)，$.ajax() 也使其變得很容易。jQuery 做得很好的另一件事是它處理 JSONP 請(qǐng)求的方式。雖然現(xiàn)在使用 CORS 大多不需要 JSONP，但 JSONP 是一種處理對(duì)不同域上的 API 進(jìn)行請(qǐng)求的方式。

那么，Vue 為您做了什么來使 Ajax 更容易呢？什么也沒有！

好的，這聽起來很可怕，但實(shí)際上并非如此。有很多選項(xiàng)可用于處理 HTTP 請(qǐng)求，而 Vue.js 采取了一種更不可知論的方法，讓我們開發(fā)者自己決定如何處理它。所以是的，這確實(shí)意味著更多工作，但我們有一些很棒的選擇。

第一個(gè)要考慮的是 Axios，這是一個(gè)基于 Promise 的庫，在 Vue 社區(qū)中非常流行。以下是它在行動(dòng)中的一個(gè)簡單示例（取自其自述文件）：

axios.get('/user?ID=12345')
  .then(function (response) {
    // 處理成功
    console.log(response);
  })
  .catch(function (error) {
    // 處理錯(cuò)誤
    console.log(error);
  })
  .then(function () {
    // 始終執(zhí)行
  });

Axios 當(dāng)然支持 POST 請(qǐng)求，并讓我們指定標(biāo)頭以及許多其他選項(xiàng)。

雖然 Axios 在 Vue 開發(fā)人員中非常流行，但我并沒有真正喜歡它。（至少現(xiàn)在還沒有。）相反，我更喜歡 Fetch。Fetch 不是一個(gè)外部庫，而是一種執(zhí)行 HTTP 請(qǐng)求的 Web 標(biāo)準(zhǔn)方式。Fetch 在大約 90% 的瀏覽器中都具有很好的支持，但這意味著它并非完全安全，但如果需要，我們始終可以使用 polyfill。

雖然這完全超出了我們?cè)谶@里討論的范圍，但 Kingsley Silas 已經(jīng)編寫了一份關(guān)于使用 Axios 和 Fetch 與 React 的優(yōu)秀指南。

與 Axios 一樣，F(xiàn)etch 也是基于 Promise 的，并且具有友好的 API：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

Axios 和 Fetch 都涵蓋所有類型的 HTTP 請(qǐng)求，因此任何一種都適合任何數(shù)量的需求。讓我們來看一個(gè)簡單的比較。這是一個(gè)使用 Star Wars API 的簡單 jQuery 演示。

<h1>星球大戰(zhàn)電影</h1>

$(document).ready(function() {
  $.get('https://swapi.com/api/films', function(res) {
    let list = '';
    res.results.forEach(function(r) {
      list  = `

${r.title}

`; }); $('#films').html(list); }); });

在上面的示例中，我使用 $.get 來訪問 API 并返回電影列表。然后我使用該數(shù)據(jù)生成一個(gè)作為 li 標(biāo)簽元素的標(biāo)題列表，并將其全部插入到 ul 塊中。

現(xiàn)在，讓我們考慮使用 Vue 的示例：

  <h1>星球大戰(zhàn)電影</h1>
  
{{ film.title }}

const app = new Vue({
  el: '#app',
  data: {
    films: []
  },
  created() {
    fetch('https://swapi.com/api/films')
      .then(res => res.json())
      .then(res => {
        this.films = res.results;
      });
  }
})

這最好的部分可能是 v-for 模板的使用。請(qǐng)注意，Vue 不關(guān)心布局（至少是 JavaScript）。數(shù)據(jù)是從 API 中獲取的。它被分配了一個(gè)變量。布局負(fù)責(zé)顯示它。我一直討厭在我的 JavaScript 中使用 HTML，雖然 jQuery 存在解決這個(gè)問題的方案，但將其烘焙到 Vue 中使其成為自然的選擇。

一個(gè)完整的（雖然有點(diǎn)瑣碎）示例

為了更深入地了解，讓我們考慮一個(gè)更真實(shí)的示例。我們的客戶要求我們?yōu)楫a(chǎn)品 API 構(gòu)建一個(gè)高級(jí)的、支持 Ajax 的前端搜索界面。功能列表包括：

• 支持按名稱和產(chǎn)品類別進(jìn)行篩選
• 表單驗(yàn)證，要求我們提供搜索詞或類別
• 當(dāng) API 正在訪問時(shí)，向用戶顯示消息并禁用提交按鈕
• 完成后，處理報(bào)告未顯示任何產(chǎn)品或列出匹配項(xiàng)

讓我們從 jQuery 版本開始。首先是 HTML：

搜索 類別 所有 食品 游戲 搜索

有一個(gè)帶有我們的兩個(gè)過濾器和兩個(gè) div 的表單。一個(gè)在搜索或報(bào)告錯(cuò)誤時(shí)用作臨時(shí)狀態(tài)，另一個(gè)用于呈現(xiàn)結(jié)果。現(xiàn)在，查看代碼。

// ... (代碼太長，此處省略) ...

代碼首先為我們要使用的每個(gè) DOM 項(xiàng)目創(chuàng)建一組變量——表單字段、按鈕和 div。邏輯的核心位于按鈕的點(diǎn)擊處理程序中。我們進(jìn)行驗(yàn)證，如果一切正常，則對(duì) API 進(jìn)行 POST 請(qǐng)求。當(dāng)它返回時(shí)，如果沒有任何匹配項(xiàng)，我們要么呈現(xiàn)結(jié)果，要么顯示消息。

現(xiàn)在讓我們考慮 Vue 版本。同樣，讓我們從布局開始：

<div id="app">
  <form>
    <p>
      <label for="search">搜索</label>
      <input type="text" v-model="search" id="search">
    </p>
    <p>
      <label for="category">類別</label>
      <select v-model="category" id="category">
        <option value="">所有</option>
        <option value="Food">食品</option>
        <option value="Games">游戲</option>
      </select>
    </p>
    <button :disabled="searchBtnDisabled">搜索</button>
  </form>

  <div v-html="status"></div>
  <ul v-if="results"><li v-for="result in results">{{ result.name }}</li></ul>
</div>

從頂部開始，更改包括：

• 將布局包裝在一個(gè) div 中，以便讓 Vue 知道在哪里工作。
• 使用 v-model 用于表單字段，以便輕松處理數(shù)據(jù)。
• 使用 @click.prevent 來處理主要搜索操作。
• 使用 :disabled 將按鈕是否禁用的狀態(tài)綁定到 Vue 應(yīng)用程序中的值（我們稍后會(huì)看到它的作用）。
• status 值與之前的示例略有不同。雖然 jQuery 有一個(gè)特定方法來設(shè)置 DOM 項(xiàng)目中的文本，另一個(gè)方法用于 HTML，但 Vue 在將 HTML 分配給要呈現(xiàn)的值時(shí)需要使用 v-html。如果我們嘗試使用帶有 HTML 的 {{status}}，則標(biāo)簽將被轉(zhuǎn)義。
• 最后，使用 v-if 有條件地呈現(xiàn)結(jié)果列表以及 v-for 來處理迭代。

現(xiàn)在讓我們看看代碼。

// ... (代碼太長，此處省略) ...

第一個(gè)值得一提的代碼塊是一組數(shù)據(jù)字段。有些映射到表單字段，而另一些映射到結(jié)果、狀態(tài)消息等。searchProducts 方法處理與 jQuery 版本中大部分相同的內(nèi)容，但總的來說，直接與 DOM 綁定的代碼要少得多。例如，即使我們知道結(jié)果列在一個(gè)無序列表中，代碼本身也不關(guān)心這一點(diǎn)。它只是分配值，而標(biāo)記負(fù)責(zé)呈現(xiàn)它?？偟膩碚f，與 jQuery 代碼相比，JavaScript 代碼更關(guān)注邏輯，這“感覺”上是更好的關(guān)注點(diǎn)分離。

jQuery 已逝，Vue 長存！

好吧，這有點(diǎn)夸張了。正如我在開頭所說，如果你喜歡使用 jQuery 并且它對(duì)你有用，我絕對(duì)認(rèn)為你不應(yīng)該更改任何內(nèi)容。

但是，我可以說，對(duì)于習(xí)慣使用 jQuery 的人來說，Vue 感覺像是很好的“下一步”。Vue 支持復(fù)雜的應(yīng)用程序，并且具有用于腳手架和構(gòu)建項(xiàng)目的強(qiáng)大的命令行工具。但是對(duì)于更簡單的任務(wù)，Vue 作為一種很好的“現(xiàn)代 jQuery”替代品，已成為我的首選開發(fā)工具！

以上是從jQuery轉(zhuǎn)到Vue的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！