怎么理解Vue中的組件

這篇文章主要介紹“怎么理解Vue中的組件”，在日常操作中，相信很多人在怎么理解Vue中的組件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么理解Vue中的組件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

這是一個強大的簡化，如果你曾研究過Vue代碼庫的復雜性，那么你就會知道這實際上不是事實。但是從根本上講，這就是Vue為我們所做的事情。

看一下這個組件：

<template>   <div>     <h2>{{ title }}</h2>     <p>Some words that describe this thing</p>     <button>Clickity click!</button>   </div> </template>

下面是用 Javascript 實現，它做了同樣的事情：

function component(title) {   let html = '';    html += '<div>';   html += `<h2>${title}</h2>`;   html += '<p>Some words that describe this thing</p>';   html += '<button>Clickity click!</button>';   html += '</div>';    return html; }

該代碼與Vue組件構造HTML 方式基本相同。當然，這里沒有響應性，事件處理或其它一系列功能，但是獲取輸出的 HTML 是同一回事。

如果你從未想過以這種方式考慮組件，那很正常，很多人也沒有。

當你開始學習Vue時，會看到新的語法和所有這些神奇的東西，它們看起來與我們以前接觸過的任何東西都不太一樣。

依靠編程基礎

一旦真正意識到 Vue 組件實際上只是函數，那么我們就可以發現一些隱藏的知識點。

我們可以從學習 Javascript 或任何其他編程語言中學到的知識應用到 Vue 中。

例如，假設我們想學習如何編寫優雅和簡潔的Vue組件。我們可以將所學到的編寫干凈 Javascript  的知識應用到Vue組件中。比如保持函數簡小，使用描述性名稱，等等

即使是學習類似的框架，如React或Angular，也是非常有用的練習。

現在讓我們看一個更詳細的例子。

以新的視角進行重構

假設有以下的一個組件：

<template>   <div>     <h2>{{ title }}</h3>     <div class="navigation">       <!-- ... -->     </div>      <div v-for="item in list">       <h3 class="item-title">         {{ item.title }}       </h3>       <p class="item-description">         {{ item.description }}       </p>     </div>      <footer>       <!-- ... -->     </footer>   </div> </template>

為簡化，我們將v-for內部的內容變成了一個新的組件，如下所示：

<template>   <div>     <h3 class="item-title">       {{ item.title }}     </h3>     <p class="item-description">       {{ item.description }}     </p>   </div> </template>

完成此操作后，我們將其替換為父組件，這使我們擺脫了多余的嵌套：

<template>   <div>     <h2>{{ title }}</h3>     <div class="navigation">       <!-- ... -->     </div>      <ListItem       v-for="item in list"       :item="item"     />      <footer>       <!-- ... -->     </footer>   </div> </template>

如果我們在寫Javascript，我們會用幾乎完全相同的方式來做這些。

下面是一個使用循環的例子

function goingLoopy() {   const elements = document.querySelectorAll('.item');    for (const el of elements) {     const { width } = el.getBoundingClientRect();     if (width > 500) {       el.classList.add('large');     }   } }

在這里，我們使用 DOM 方法獲取了類為 item 的所有元素，如果它們大于500px，則將large類添加其中。

這已經很好了，但是如果還要優化代碼，應該怎么做呢

我的猜測是，你可能會把for..of的內容帶入一個新函數中：

function updateElement(el) {   const { width } = el.getBoundingClientRect();   if (width > 500) {     el.classList.add('large');   } }  function goingLoopy() {   const elements = document.querySelectorAll('.item');    for (const el of elements) {     updateElement(el);   } }

如果你將組件看作是一個函數，那么對于我們的優化會有更深入的了解。

他們一直在你腦海中，你只是沒有意識到。

到此，關于“怎么理解Vue中的組件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！