vue.js 學習手冊 框架的選擇與導入

這篇文章是vue.js學習手冊的第一篇文章,也是我認為最難寫的一篇文章,就像vue.js提到的他是一個“漸進式”框架,在這篇文章也想要跟各位分享選擇框架的一些原則,讓大家可以“漸進式”的了解為什麼我們在網頁開發時需要選擇一個框架來幫助我們,在選擇框架之前我們要先弄清楚,框架究竟可以幫助我們在網頁開發上的哪些部分,如果這些部分跟你要開發的項目並不媒合,那奉勸你別把單純的事情搞複雜了,而且你可能會開始討厭學習框架,但若反之,你一定會愛上框架,甚至覺得他讓你事半功倍。

強大的前、後端串接功能


現代的網頁被要求除了有著摩登的前端UI之外,在網頁中的資料有常需要配合“大數據”下的資料進行呈現,說白話一點也就是網頁上面呈現的資料並不是寫死在頁面中的,而是透過後端資料庫取出來的,舉凡會員登入的名稱、購物網站中的商品資訊、新聞網站中的新聞就連你現在看到的這篇文章,也都是存放於資料庫中,網頁去對資料庫進行讀取後顯示在介面上的。

當然除了對資料庫進行讀取之外,網頁也會對資料庫進行儲存的動作,舉凡會員資料修改、商品訂單建立、網站偏好設定…等等,而框架在這方面有許多很好的方法,讓我們可以更周全快速的處理這方面的動作,節省許多開發的時間與減少Bug上的產生。

模組化開發架構


在一個大型網站中,可能有許多網頁中會出現相同風格的元素,例如:下拉式選單、按鈕、分頁導覽,是每一個頁面都會重複應用到的一些元件,傳統的網頁開發上就是在每一頁嵌入對應的HTML Code,這樣的做法非但不易維護,也會增加許多冗長且重複的程式碼。

模組化開發可以如上圖所示,將頁面中需重用的元素拉出來設計成一個Component,在不同頁面可以透過引入的方式置入該Component,而Component的維護可以統一在該Component中進行,可以減少大量維護上的時間。

透過 Virtual DOM 來提升頁面效能


現代的網頁前端框架為了提升頁面操作的效能都提供了Virtual DOM,在Vue.js 2.0中也引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2~4倍,並大大降低了內存消耗,至於為何Virtual DOM能提昇網頁的效能,大家就必須了解我們透過Javascirpt更新實體DOM時會產生的效能問題開始了解。

實體DOM更新的效能測試

這邊製作一個簡單的範例對實體DOM和虛擬DOM的效能進行說明:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="itemList">
        <ul id="itemList__ul">
          <li id="liID">Item 1</li>
        </ul>
      </div>
    </div>
    <button onClick="insertItems()">Go</button>
  </div>
</body>
</html>
<script>
  var itemData = "";
  function insertItems() {
    for (var i = 1; i <= 100000; i++) {
      itemData = "Item " + i
      document.getElementById("liID").innerHTML = itemData;
    }
  }
</script>

在HTML DOM的操作上,只要頁面元素有變更,就可能會觸發Reflow或Repaint這樣的動作,瀏覽器也會耗費相當多的資源在進行這些動作,以上述的例子來看,當我們按下頁面上的按鈕之後,就會透過迴圈去改變li的內容,這樣將會觸發多次的瀏覽器動作。

下圖是我們在Chrome中獲得的效能資訊:

若是我們將上述程式中的第26行移除,則效能會改變如下圖所示:

這樣可以很明確的了解效能殺手就是程式中的第26行,而這行程式的目的是去更新瀏覽器中的內容,若沒有這行沒辦法讓使用者看到最終的結果,因為我們必須透過這樣的方式更新DOM內容。

虛擬DOM的效能測試

同樣頁面的效果,我們在Vue裡面的作法如下:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in items">{{ item.message }}</li>
    </ul>
    <button @click="insertItems">Go</button>
  </div>
</body>
</html>
<script>
    var vueData = {
        items: [
      { message: 'Item 1' }
    ]
    }
    var app = new Vue({
        el: '#app',
        data: vueData,
    methods: {
      insertItems: function(){
        for(var i = 1; i <= 100000; i ++){
          vueData.items[0].message = "Item " + i;
        }
      }
    }
    })
</script>

同樣的結果在Vue會在Javascript和瀏覽器中加入一層Virturl DOM,待Virturl DOM更新完畢之後,在寫入瀏覽器中。

透過這樣的方法,使用這得到的一樣的效果,但大大提高了使用者端瀏覽器的效能,可以從下圖觀察的出來!

在Virtual DOM的架構中,會把程式的動作動作集中在Virtual DOM中運算,當確定整個頁面結構之後,再一次性地將結果繪製到頁面中,可以想像成原本的DOM操作就是在每一次在CPU運算之後,直接把結果寫到硬碟當中,而Virtual DOM就是在CPU與硬碟間加入了記憶體層,CPU運算後先將結果儲存在記憶體中,最後再將記憶體的資料一次性的寫入硬碟

PS:記憶體的運算速度超過硬碟很多倍。

結論


綜合上述所說,網頁專案中採用前端框架,有著減少開發時間、易於維護、增加頁面效能…等優點,但若你的專案並不會大量與後端串接、製作上元件重複使用的機會不高、在頁面中也不太會對DOM進行Reflow與Repaint,可能是一個活動網頁、公司形象網頁…等,也許就沒有必要去選用一個前端框架,簡言之工具用在正確的地方,才能顯現出它的價值,當然目前符合使用框架的專案也一定非常多,也就是這樣的原因,才會造成前端框架的流行。

You may also like...

63,302 Responses

  1. KevinLon表示:

    Военный юрист — это специалист, обладающий глубокими знаниями военно-правовых норм и особенностей законодательства, который оказывается незаменимым как для военнослужащих, так и для их семей. В условиях современных реалий, когда правовые вопросы становятся всё более сложными и многообразными, необходимость в квалифицированной помощи только возрастает. Если вы столкнулись с правовыми проблемами, связанными с военной службой, важно обратиться именно к военному адвокату в Москве, который сможет профессионально оценить вашу ситуацию, предоставить грамотные консультации и обеспечить защиту ваших интересов. Хороший военный адвокат не только способен разобраться в специфике дел, связанных с призывом, увольнением из армии, социальной защитой военнослужащих, но и знает тонкости обращения с различными органами власти. Обратившись к военному юристу в Москве, вы получите поддержку в подготовке необходимых документов, а также в представлении ваших интересов в суде. Значение профессиональной помощи в этой области нельзя переоценить, так как квалифицированный юрист сможет предотвратить множество ошибок, которые могут негативно сказаться на вашей карьере и жизни в целом. Таким образом, выбор компетентного военного адвоката в Москве — это важный шаг для каждого военнослужащего, стремящегося защитить свои права и интересы в сложной правовой среде.

    Рекомендую обратиться за профессиональной консультацией к военному адвокату в Москве, чтобы четко понимать возможные действия в конкретной ситуации, это существенно увеличит шансы на успешное разрешение вопроса.

  2. KennethPah表示:

    ciprofloxacin order online cipro pharmacy antibiotics cipro

  3. Richardmus表示:

    CollagemasterCo offers an unique, transformative encounter for those searching for to preserve their very own most cherished reminiscences. Specializing in tailor made photo collages, many of us bring your private moments to living through thoughtfully curated designs that indicate the essence of your respective experiences.

    Our soft online platform the actual process simple and even convenient, allowing a person to easily upload photos and make a visible masterpiece. Whether or not it’s a wedding party, a family re-union, or a landmark birthday, each collage is meticulously crafted with awareness of details and artistry.

    https://myanimelist.net/profile/CollageMasterCo

    In CollagemasterCo, we take satisfaction in our dedication to quality. Every collage is a display of craftsmanship, ensuring the memories are immortalized with sophistication and style. Celebrate life’s most precious moments having a personalized work regarding art that will survive for years in order to come.

  4. Jugabet_huPl表示:

    Jugabet apuestas deportivas Jugabet apuestas deportivas .

  5. RobertCaxia表示:

    Юрист по наследству играет ключевую роль в процессе передачи имущества после смерти наследодателя, особенно когда речь идет о сложных ситуациях, таких как наличие долга, конфликтов между наследниками или неурегулированных правовых вопросов. Сложность наследственных дел требует от адвоката глубоких знаний в области гражданского и семейного права, а также опыта в ведении переговоров и судебных разбирательств. Если вас интересует вопрос, сколько стоит услуги адвоката по наследственным делам, следует учитывать, что цена может варьироваться в зависимости от региона, сложности дела и репутации профессионала. Часто юристы предлагают различные варианты оплаты, включая фиксированную ставку за услуги или почасовую оплату, что может быть удобным для клиентов с разными финансовыми возможностями. Обратившись к юристу, вы получите не только помощь в оформлении наследства, но и правовую защиту интересов, что особенно актуально в случае споров. Как правило, стоимость услуг адвоката по наследственным делам оправдывает себя благодаря грамотному подходу к разрешению споров и минимизации возможных рисков, связанных с наследственными правоотношениями. Помните, что качественная юридическая помощь может существенно облегчить процесс получения наследства и устранить много проблем, с которыми сталкиваются наследники.

    Если у вас возникли трудности, то рекомендую обратиться к юристу по наследству, чтобы избежать возможных проблем и защитить свои права.

  6. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали ремонт телефонов samsung сервис, можете посмотреть на сайте: ремонт телефонов samsung в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  7. LeonardKnism表示:

    https://www.ownguard.ru/ — Посетите сайт для получения подробной информации о наших услугах.

  8. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали срочный ремонт телефонов nothing, можете посмотреть на сайте: ремонт телефонов nothing
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. WilliamNib表示:

    Гестапо в действии: Скандальные методы ГСУ Петербургского МВД
    Главное следственное управление (ГСУ) МВД Санкт-Петербурга оказалось в центре скандала. Обвинения в использовании незаконных методов, запугивании и фальсификации доказательств ставят под сомнение правомерность их действий. Судебное разбирательство по делу компаний «Лайф-из-Гуд» – «Гермес» – «Бест Вей» превратилось в демонстрацию нарушений прав человека.
    Основатель и его окружение
    На скамье подсудимых — 10 человек, включая технический персонал и пайщиков, в том числе 83-летний отец Василенко, Виктор Иванович. Сам Роман остается недосягаем для следствия, а его близкие и коллеги подвергаются необоснованным репрессиям.
    Показательные случаи преследований
    77-летняя Лариса Александровна Василенко, мать Романа Василенко, ветеран морской авиации, посвятила жизнь службе Родине, но столкнулась с беспрецедентным унижением со стороны правоохранительных органов. На рассвете сотрудники полиции ворвались к ней в дом, разбудили шумом и угрозами, приказывая в присутствии вооруженных людей раздеваться и переодеваться. Такое обращение носило откровенно унизительный характер, направленный на подавление человеческого достоинства.
    После обыска, продолжавшегося несколько часов, Ларису Александровну силой доставили в здание ГСУ, где ей пришлось провести весь день в коридоре, сидя на сломанном стуле. Ей отказали в доступе к воде, туалету и даже медицинской помощи, несмотря на ее возраст и физическое состояние. Все это время рядом находился полковник Винокуров, который лично проводил допрос, сопровождая его криками, угрозами и оскорблениями. Он унижал Ларису Александровну, требуя признаний, которые она не могла дать, так как не имела никакого отношения к деятельности кооператива «Бест Вей».
    Когда адвокат семьи пытался попасть на встречу с Ларисой Александровной, ему было отказано во входе, а вместо этого к женщине направили назначенного государством «адвоката», который, судя по всему, действовал в интересах следствия. Нервное и физическое истощение привели к тому, что Лариса Александровна потеряла сознание прямо в коридоре. Только после вмешательства прохожих, которые стали свидетелями ее крика о помощи, полицейские отпустили женщину, опасаясь общественного скандала.
    Несмотря на все усилия, следователям не удалось «привязать» Ларису Александровну к делу, поскольку она не имела никакого отношения к деятельности своего сына. Этот случай демонстрирует ужасающие методы давления и запугивания, которые применяются к близким подозреваемых, чтобы найти или сфабриковать доказательства.
    Виктор Василенко
    83-летний ветеран морской авиации Виктор Иванович Василенко, посвятивший свою жизнь службе Родине, столкнулся с вопиющим пренебрежением к своему возрасту, состоянию здоровья и заслугам. Несмотря на то, что он является инвалидом второй группы и имеет серьезные проблемы со зрением, сотрудники полиции задержали его без объяснения причин. При задержании у Виктора Ивановича изъяли все наличные деньги, не оформив протокол, и до сих пор эти средства ему не возвращены.
    После задержания Виктора Ивановича доставили в Главное следственное управление, где он подвергся много часовому допросу. Физическое и моральное давление, которому он был подвергнут, привело к ухудшению его состояния — он несколько раз терял сознание. Несмотря на вызов скорой помощи, следственные действия продолжались. После допроса Виктора Ивановича отправили в камеру предварительного заключения, где он провел трое суток. Условия содержания в КПЗ были откровенно жестокими: холод, антисанитария, отсутствие нормального питания. Эти дни стали настоящим испытанием для пожилого человека.
    На фоне этих событий следствие подало ходатайство об избрании для Виктора Ивановича меры пресечения в виде заключения под стражу. Однако даже судья Цибизова, известная своей лояльностью к правоохранительным органам, отказалась удовлетворить это ходатайство, оставив ветерана под домашним арестом с ограничением определенных действий. Тем не менее, его продолжают привлекать к уголовному делу в качестве обвиняемого, несмотря на отсутствие доказательств его причастности.
    Сложившаяся ситуация свидетельствует о том, что Виктора Ивановича фактически используют как заложника и рычаг давления на его сына, Романа Василенко. Такой подход не только нарушает права человека, но и унижает достоинство ветерана, который посвятил свою жизнь защите Родины.
    Зоя Семёнова
    75-летняя пенсионерка Зоя Магомедовна Семёнова, уважаемый и заслуженный человек, стала жертвой грубых и незаконных действий правоохранительных органов. Зою Магомедовну задержали прямо в аэропорту Пулково, когда она возвращалась домой после участия в судебных заседаниях, на которых поддерживала обвиняемых по делу кооператива. Параллельно с этим, в ее отсутствие, был произведен обыск в доме, причем без предъявления соответствующего ордера. Полицейские, проводившие обыск, сломали входную дверь и повредили окна, оставив жилище в разгромленном состоянии.
    После задержания Зою Магомедовну силой доставили в Главное следственное управление, где она подверглась жестокому обращению. Ее держали в замкнутом помещении в течение всего дня без возможности попить воды, воспользоваться туалетом или получить медицинскую помощь, несмотря на её преклонный возраст и наличие серьезных проблем со здоровьем. Давление в этот день у Зои Магомедовны поднялось до критического уровня (свыше 200), но просьбы о вызове врача игнорировались.
    На допросе следователи прибегли к тактике «доброго и злого полицейского». Следователь Мальцев грубо кричал на Зою Магомедовну, угрожая посадить её в подвал и лишить свободы. Его коллега, следователь Сапетова, в роли «доброго» следователя, пыталась склонить её к сотрудничеству, обещая свободу в обмен на подпись под заранее заготовленными протоколами. Зоя Магомедовна находилась в таком стрессе, что физически не могла читать документы, которые ей предлагали подписать, но Сапетова отказалась зачитывать их вслух.
    На судебных заседаниях выяснилось, что протокол допроса содержал ложные сведения, которые Зоя Магомедовна никогда не произносила. Более того, она заявила, что вообще не могла использовать предложенные формулировки, поскольку они противоречили её взглядам и фактам. Несмотря на это, прокуратура продолжает использовать этот документ как доказательство вины других фигурантов дела.
    Этот случай демонстрирует циничное пренебрежение к правам пожилых граждан, которые становятся жертвами грубого давления и манипуляций со стороны правоохранительных органов.
    Евгений Иорданиди
    66-летний офицер в отставке Евгений Иорданиди, человек с безупречной военной карьерой и наградами за службу, стал жертвой откровенно репрессивных действий правоохранительных органов. В ходе обыска в его доме сотрудники полиции грубо обращались с ним, нарушая не только его права, но и элементарные нормы человеческого достоинства. Во время допроса в ГСУ Евгения подвергли как физическому, так и моральному давлению. Следователи использовали запугивания и манипуляции, вынуждая его дать ложные показания против себя и других. Под воздействием этих методов он подписал документы, содержание которых не имел возможности тщательно изучить. Позже, уже в суде, Евгений отказался от своих показаний, заявив, что они были выбиты у него под угрозами.
    Дмитрий Выдрин
    Дмитрий Выдрин, водитель и консультант по продажам продуктов компании «Гермес», оказался в схожей ситуации. Его задержали и доставили в ГСУ, где под угрозой немедленного заключения в СИЗО следователи вынудили его оговорить не только себя, но и других фигурантов дела. Дмитрий надеялся, что такой шаг позволит ему избежать более строгой меры пресечения, однако позднее он осознал масштабы манипуляций и заявил о готовности отказаться от своих показаний как полученных под давлением и в результате морального воздействия.
    Шамиль Фахруллин
    Пенсионер Шамиль Зиннатович Фахруллин, который был клиентом компании «Гермес», также подвергся репрессивным действиям следователей. Во время жесткого допроса, сопровождавшегося угрозами и запугиваниями, его вынудили написать заявление, в котором он выступал в качестве потерпевшего. Вскоре после допроса, перенесшего на фоне сильнейшего психологического давления, Шамиль Зиннатович скончался. По словам адвокатов, его смерть, вызванная инфарктом, напрямую связана с перенесенной в ГСУ травмой, что подчеркивает цинизм и жестокость методов, применяемых в данном уголовном деле.
    Массовая фальсификация показаний
    Многочисленные свидетели в суде заявили, что их показания сфальсифицированы. Один из ключевых свидетелей обвинения, Алексей Комаров, не смог повторить «свои» показания, сославшись на провалы в памяти. Это подтверждает массовую фабрикацию доказательств со стороны следователей.
    Ущерб военным и ветеранам
    Кооператив «Бест Вей», созданный для решения жилищных проблем военных, стал объектом атаки МВД. Члены кооператива — ветераны и участники СВО — лишены средств, собранных на квартиры. Такое отношение МВД и прокуратуры к военным пенсионерам дискредитирует престиж армии в условиях вооруженного конфликта.
    Призыв к справедливости
    Незаконные действия следователей, запугивание граждан и использование методов, напоминающих репрессивные практики прошлого, требуют серьезного общественного и правового осуждения. Системное нарушение прав человека со стороны МВД и прокуратуры подрывает доверие к государственным институтам. Защитники закона и правосудия должны добиться привлечения виновных к ответственности в рамках закона.

  10. Jugabet_hkPl表示:

    Jugabet [url=https://www.jugabet9.com]Jugabet[/url] .

  11. RobertJar表示:

    prednisone pills 10 mg: where can i order prednisone 20mg – prednisone 250 mg

  12. AngelCroft表示:

    фотосъемка одежды на моделях – Профессиональная съемка одежды на моделях для онлайн-магазинов и каталогов.

  13. EdwardLoW表示:

    Смотрите онлайн новые приключения Тома и Джерри на Марсе. Наши друзья во время своих безумных гонок случайно оказались в космическом корабле, который держит курс на Марс новогоднее путешествие мультфильм 1959 смотреть

  14. MichaelCek表示:

    Услуги дренажа по Солнечногорскому району Работаем без выходных.https://drenaj-mos.ru/

  15. IreneJep表示:

    В этой статье собраны факты, которые освещают целый ряд важных вопросов. Мы стремимся предложить читателям четкую, достоверную информацию, которая поможет сформировать собственное мнение и лучше понять сложные аспекты рассматриваемой темы.
    Получить дополнительные сведения – https://vyvod-iz-zapoya-17.ru/

  16. Jugabet_bkPl表示:

    Jugabet oficial [url=https://www.jugabet9.com]Jugabet oficial[/url] .

  17. JacobLoody表示:

    http://www.smmib.ru – надёжный выбор для создания комфортного кухонного пространства.

  18. DanielAbice表示:

    http://amoxstar.com/# medicine amoxicillin 500mg

  19. DavidItets表示:

    Ремонт ноутбуков в в Волгограде Центральный район качественно.

    Обращайтесь всегда к вашим услугам!

  20. Hectorhig表示:

    Профессиональная накрутка отзывов с гарантией результата, повышаем продажи и улучшаем посещаемость вашей точки на картах Накрутка отзывов 2Gis Алматы

  21. DerekWab表示:

    кухни под заказ спб позволяют учитывать все особенности вашего помещения.

  22. AngelCroft表示:

    съемка ювелирных изделий – Съемка украшений, подчеркивающая их детали и блеск с помощью профессионального освещения.

  23. KennethPah表示:

    buying amoxicillin in mexico AmoxStar where to get amoxicillin over the counter

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。