你需要知道的關於Vue.js前端框架10件事

隨著前端JavaScript框架（包括新的Vue.js 3）的不斷興起，跟上它們並瞭解它們的所有新功能變得至關重要。

在本文中，我們將探索Vue.js 3及其新增功能。這些最新新增的內容使Vue.js更加強大，使其成為您下一個專案可以考慮的絕佳框架。您將詳細瞭解Vue.js的10件事，以及它如何幫助您交付可擴充套件和高效能的前端應用程式。

1. 什麼是Vue.js？
2. 為什麼開發人員使用Vue.js
3. Vue.js的優缺點
4. 關於Vue.js你應該知道的10件事

什麼是Vue.js？

根據Vue.js的建立者Evan You的說法：

Vue.js 是一種更靈活、更少固執己見的解決方案。它只是一個介面層，因此您可以將其用作頁面中的輕量級功能，而不是成熟的SPA。

他想建立一個與Angular一樣強大的前端框架，而且“更輕”、更靈活，沒有Angular附帶的所有不必要的外掛和概念。結果是Vue.js，它是當今使用的最流行的前端框架之一。

Vue.js是第二流行的前端框架 （來源：State of JS 2020）

為什麼開發人員使用Vue.js

不同的原因促使開發人員使用特定技術。讓我們討論為什麼我們認為你應該學習Vue.js。

首先，Vue.js是大多數開發人員可以使用的最直接的框架之一，因為該框架使用JavaScript。因此，任何具有基本JavaScript知識的人都可以使用Vue.js進行開發。

Vue CLI工具與其他前端開發工具相結合，使設定Vue.js變得輕而易舉。預設情況下，它設定了一些功能，但您也可以使用DRY（不要重複自己）邏輯和結構構建程式碼。

響應性也內建於Vue.js中。這意味著在Angular框架上流行的實時功能在Vue.js中變得輕而易舉。例如，您可以輕鬆地在Vue.js應用程式中應用一個簡單的指令，例如v-if

接下來，讓我們討論Vue.js的主要優缺點。

Vue.js的優缺點

Vue.js是當今使用的第二大流行框架。讓我們看看是什麼讓它與Web開發人員保持一致，以及是什麼將他們推開。

Vue.js的優點

我們將從探索Vue.js的積極方面開始。

體積小

Vue.js的可下載大小非常小，約為18KB，與其他大尺寸框架相比非常出色。但是，有了這樣的規模，Vue.js將對前端應用程式的SEO和UX產生積極影響。

單檔案元件和可讀性

Vue.js使用基於元件的架構，從而將大塊程式碼分成更小的元件。另外，在Vue.js中，一切都是一個元件，每個元件都是用HTML、CSS和JavaScript編寫的，從而鼓勵可讀性和簡單性。

實體工具系統

Vue.js支援許多開箱即用的前端開發工具，您幾乎不需要任何配置。例如，Vue.js支援Babel和Webpack等工具。此外，它還提供單元測試、端到端測試庫、靈活易用的路由系統、狀態管理器、伺服器端渲染 (SSR) 等。

便於使用

如果您以前使用過Vue.js，您會同意它非常易於使用。它使通常的Web開發方法現代化，使任何初學者都可以輕鬆地直接進入並通過一些實踐感到舒適。

Vue.js的缺點

現在我們已經介紹了優點，讓我們探索Vue.js的缺點。

反應複雜性

Vue.js中雙向繫結的實現是管理Vue.js元件的便捷工具。雙向繫結是指在元件類與其模板之間共享資料，它的開發是為了如果一個位置的資料發生變化，它會自動更新其他位置。

然而，當反應性系統僅重新呈現那些被觸發的資料塊時，有一個關於反應性如何工作的問題。有時，讀取資料時會出現一些錯誤，因此需要將資料展平。您可以通讀這個已知問題以及它是如何在Vue.js站點上解決的。

語言障礙

最初，Vue.js主要被中國人採用，小米和阿里巴巴等大公司幫助推廣該框架並在勞動力市場創造需求。然而，隨著許多中國公司的大量採用，許多論壇、討論渠道等主要是中文的，這使得非母語的開發人員難以採用。

截至今天，情況已不再如此，因為Vue.js已經發展到包含對多種語言的支援，但有些語言的支援比其他語言少。

過度靈活的風險

如上所述，Vue.js非常靈活且易於使用。因此，很容易到處都有大量義大利麵條式程式碼，因為企業團隊中的每個人對如何做事都有不同的看法。

從上面討論的Vue.js的優缺點來看，您可能已經發現了一些您喜歡的功能和一些不適合您的功能。

關於Vue.js你應該知道的10件事

以下是您需要了解的關於Vue.js的十件事，以及瞭解它們的必要性。

計算屬性

計算屬性是Vue.js中最常用的特性之一。計算屬性使您能夠建立可以以高效和可讀的方式修改、操作和顯示資料的屬性。

當您想為格式化、更改值或在某些情況下需要觸發的大量過程重複許多小方法時，它會派上用場。

計算屬性有助於刪除模板中過多的邏輯。過多的這種邏輯會導致您的程式碼變得臃腫且難以快速維護。

假設您想將字串格式化為大寫字母，您可以這樣做：

<template>
  <div>
    <p> I love {{ value.toUpperCase() }} </p>
  </div>
</template>

如果您需要在50個不同的地改變value變數？臃腫，對吧？好吧，計算屬性可以提供幫助：

<template>
  <div>
    <p> I love {{ value }} </p>
  </div>
</template>
<script>
  export default {
    computed:{
      value(){
        return this.value.toUpperCase()
      }
    }
  }
</script>

您可以輕鬆地將toUpperCase()更改為toLowerCase() ，它會從一個點反映出來。

事件處理

通過$emit和v-on，Vue.js使得與使用的子和父類的溝通變得輕而易舉。處理元件層次結構之間的通訊變得輕鬆而直接。

$emit函式接受兩個引數：名稱字串和要發出的可選值。

v-on:event-name是在子元件用於接收由它的父元件發出的事件：

<template>
  <section>
    <button @click="onClick">Add </button>
  </section>
</template>
<script>
export default {
  name: "AddEvent",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

一旦您觸發Add按鈕， onClick方法就會觸發$emit事件，該add事件傳送到監聽add事件的子元件。

我們來看看如何監聽一個事件：

<template>
  <section>
  <p v-show="showSaveMsg">This component is listening to the ADD event</p>
  <add-event v-on:add="onAdd"></add-event>
  </section>
</template>
<script>
export default {
  data(){
    return {
      showSaveMsg: false
    }
  },
  components:{
    AddEvent: () => import('./AddEvent')
  },
  methods: {
    onAdd() { 
        this.showSaveMsg = true;
    }
  }
}
</script>

上面的程式碼監聽add事件並通過將showSaveMsg的值更改為true來響應，這再次顯示訊息。

延遲載入/非同步元件

延遲載入是Vue.js的最佳效能技巧之一，其中元件是非同步或按需新增和呈現的，這將顯著減少檔案大小、HTTP請求-響應時間等。

延遲載入是通過Webpack動態匯入實現的，它還支援程式碼拆分。 Vue.js允許延遲載入元件，可以使用以下指令碼全域性實現：

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));

您可以使用如下元件在本地實現它：

<template>
  <div>
    <component></component>
  </div>
</template>
<script>
export default {
  components: {
    'Component': () => import('./Component')
  }
}
</script>

全域性元件

我們可以通過全域性元件在Vue.js中實現顯著的可重用性，您只需註冊一次元件，然後在Vue.js例項中的任何地方使用它。

全域性元件是一個重要的特性，每次單獨註冊元件都可以為您節省大量時間，但是通過全域性註冊所有元件很容易被誤用。全域性註冊所有元件很容易導致構建大小過大，從而導致SEO不佳和頁面載入時間變慢。

確保始終註冊在專案中具有許多用例的全域性元件，如下所示：

import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));

單檔案元件

Vue.js最強大的特性之一是元件；它可以幫助您擴充套件基本的HTML元素、CSS和JavaScript，以封裝可重用的程式碼。

元件可以幫助將大型專案分解為更小的、可重用的部分，我們可以將這些部分擴充套件到整個專案，從而鼓勵軟體工程的DRY（不要重複自己）原則。

它可以為大型專案提供組織和封裝，程式碼可重用，並且可以拆分成.vue檔案。

<template>
  <section>
    <button @click="onClick">Add</button>
  </section>
</template>

<script>
export default {
  name: "CustomButtom",
  methods: {
    onClick() { 
      this.$emit('add', this.data);
    }
  }
}
</script>

<style scoped>
  button{
    /** Button Styles */
  }
</style>

上面的指令碼建立了一個自定義按鈕元件，我們可以在我們的專案中重用它。每個元件都有自己的HTML、CSS和JavaScript。

測試

Vue.js提供了最強大的測試庫之一，使使用Jest和Mocha進行單元測試或端到端測試變得輕而易舉，幾乎不需要配置。

快速瀏覽一下使用這些工具進行的測試對您來說是值得的。因此，讓我們在下面探索安裝、設定和測試演示專案。

如果您使用推薦的Vue CLI工具來設定您的專案，請執行以下命令：

vue add unit-jest //to run unit test with jest

npm install --save-dev @vue/test-utils

接下來，在設定之後，包含以下程式碼，該程式碼演示瞭如何測試一個簡單的元件：

// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
  template: '<p>{{ message }}</p>',
  props: ['message']
}

test('displays a message', () => {
  // mount() returns a wrapped Vue component we can interact with
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: 'Welcome to our testing world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Welcome to our testing world')
})

Vue測試庫有兩個很好的選項來測試你的元件：Mount和Shallow。如果要測試完全隔離的元件，請使用shallow方法。否則，如果您需要處理帶有要確保通訊的子元件的元件，則mount選項非常有效。

強大的 Vue CLI 工具

Vue CLI是一款出色的CLI工具，可為任何Vue開發人員提供強大的功能。有了它，您可以快速獨立地測試任何元件。 Vue CLI的偉大之處在於，您可以完全獨立地開發一個元件，對其進行測試，並且在迭代該特定元件時仍然可以訪問熱過載。

為了演示，讓我們全域性安裝Vue CLI：

npm install -g @vue/cli

接下來，您可以通過執行以下命令來測試任何元件：

vue serve ./components/views/Home.vue

如果您希望提取特定元件以與您的同事共享，您可以使用以下命令實現：

vue build --target lib --name goldenRule ./components/views/Home

Vue CLI非常強大，如果您掌握使用它的技巧，可以節省大量生產時間。如果想了解更多，可以看一下官方文件。

Props管理

Props管理對Vue元件至關重要，因為它可以以不同的方式建立。您還可以驗證Prop、建立多個Prop並根據需要修改它們。

要在Vue元件中建立新屬性，您可以通過幾種不同的方式來實現。假設你有你的元件，你需要建立Prop：isAdmin。

讓我們看看您可以採用的不同方法：

<template>
  <section>
    <component v-if="isAdmin"></component>
  </section>
</template>
<script>
export default {
  name: 'Component',

 // One
  props: {
    isAdmin: {
      type: Boolean,
      default: false,
      required: true
    }
  },
 
 // Two
  props: ['isAdmin'],

 // Three
  props: {
    isAdmin: Boolean
  }

}
</script>

驗證您的Prop非常重要。幸運的是，這也很簡單：

// ...

 // One
  props: {
    isAdmin: {
      default: false,
      required: true,
      validator: function(value) {
        return typeof === 'boolean';
      }
    }
  },

// ...

最後，修改props就像重新調整它們的值一樣簡單：

//...

methods: {
  isAdmin() {
    this.isAdmin = true;
  }
}

//..

要為父元件中的prop賦值：

<template>
  <section>
    <component :isAdmin="true"></component>
  </section>
</template>

伺服器端渲染 (SSR)

憑藉使用Vue.js建立前端應用程式的所有強大功能和優勢，Vue.js本身仍然是一個僅渲染和操作DOM元素的客戶端庫。

服務端渲染幫助Vue.js等客戶端框架更好的實現。搜尋引擎爬蟲在爬行時會看到您網站的完全呈現頁面。

為了讓Google和Bing更快地將您的網站編入索引，您的網站需要更快、更高的內容釋出時間得分。這就是Vue.js中的伺服器端渲染可以幫助您實現的目標。

伺服器端渲染 (SSR) 是一種流行的技術，用於在伺服器上渲染常規客戶端單頁應用程式 (SPA)，然後將完全渲染的頁面傳送給閱讀器。

當頁面在伺服器端呈現時，它會將其作為響應傳送給客戶端。因此，當瀏覽器顯示搜尋引擎頁面時，每條資訊都已經呈現。

對於初學者來說，在Vue.js中實現SSR是很困難的。使用Nuxt.js會更容易，它具有內建的SSR和非常低的學習曲線。

部署

Vue.js在開發過程中會出現許多警告、錯誤和膨脹的檔案大小，但是當您開啟生產進行部署時，這些問題會立即消失。 Vue.js將自動配置Webpack構建工具、最小化、CSS提取和清除、快取、跟蹤執行時錯誤等。

Vue.js通過自動配置和設定生產環境使您的部署過程變得非常簡單，無需開發人員執行任何額外步驟。

要部署Vue.js應用程式，您可以閱讀其一般指南。

小結

在本文中，我們詳細探討了Vue.js是什麼、為什麼要使用它、它的優點和缺點以及你應該瞭解的10件事。

希望您已經提高了Vue.js的知識，以交付可擴充套件和高效能的前端應用程式。繼續碼字吧！