[轉帖]vue是什么？vue的優點有哪些？
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
一、vue是什么Vue是一套用于構建用戶界面的漸進式Javascript框架 vue就是一個js庫，并且無依賴別的js庫，直接引入一個js文件就可以使用，與傳統JS和JQuery框架不同，Vue的漸進式框架表示開發者可以由簡單組件寫起，漸漸搭建出一個復雜的前端平臺。 形成Vue漸進式框架的核心概念為：組件化，MVVM，響應式，和生命周期。 `Vue一切是數據為核心，使用數據來驅動視圖刷新，我們不建議去操作dom` 二、為什么要用Vue？1. 組件化Vue將組成一個頁面的HTML，CSS和JS合并到一個組件中，可以被其他組件或頁面引入而重復利用。通常每個.Vue文件作為一個組件導出，組件可以作為基礎組件（如按鈕）或一個頁面（如登錄頁面）。組件化很好的將一個龐大復雜的前端工程拆分為一個個組件，重復利用的性質也大大提高了開發的效率。 <template> <div class="demo"> <h2>學校名稱：{{name}}</h2> <button @click="showName">點我提示學校名</button> </div> </template>
<script> export default { name:'School', data(){ return { name:'bdqn', } }, methods: { showName(){ alert(this.name) } }, } </script>
<style> .demo{ background-color: orange; } </style> 2. MVVM 數據雙向綁定MVVM模式（全稱為Model-View-ViewModel）為Vue實現數據雙向綁定。 在MVVM中，View為視圖層，ViewModel為業務邏輯層，Model為數據層。 什么是數據雙向綁定呢？ 當用戶使View變化時（如填寫表單），變化會自動同步到ViewModel處理相應邏輯，并將變化更新到Model數據庫。 反之，若服務端數據變化（如股價波動），變化會自動同步到ViewModel處理相應邏輯，并將變化同步到View展現給用戶。 在用Vue之前，完成HTML和JS之間的交互需要使用大量的DOM操作來實現動態加載。 MVVM的數據雙向綁定減少了DOM操作，更高效地實現了視圖和數據的交互。同時，MVVM使界面、交互和數據層分離，便于設計人員負責設計界面，后端開發人員提供數據接口，而前端開發人員專注于業務交互邏輯的實現。
3. 響應式 虛擬DOM對于DOM來說，當HTML的一個元素（如div）需要響應數據更改時，會刷新整個頁面，導致效率堪憂。 對于虛擬DOM，瀏覽器會將HTML文件轉換為JS文件并復制一個額外使用（虛擬）。對于任何更改，虛擬DOM都將復制的JS與原始JS進行比較，只重新加載更改的部分，局部修改到真實DOM上。 在Vue中，每個綁定data屬性的組件都有一個Watcher檢測data屬性的變化。一旦檢測到改變，則重新渲染該組件，這就是響應式。
4.生命周期最后，每個Vue組件都有生命周期，過程為創建 -> 掛載 -> 更新 -> 銷毀。開發者可以通過鉤子函數（如mounted）在組件生命周期中的不同時刻進行操作。下面是一張Vue生命周期的完整圖解。
三、Vue的優點1. 輕量級 Vue作為一款輕量級前端框架，大小只有18–21KB，工程搭建簡單，只需要幾行命令符。因為Vue使用的主體語言為JS，開發者可以靈活地將其他框架（如React和Angular）的項目遷移到Vue，具有很高的集成能力。Vue提供的router路由可以便捷地搭建一個多界面應用。 2. 高性能 虛擬DOM和響應式避免了不必要的全局重新渲染，提升了用戶體驗，使用戶操作更加流暢。 3. 好上手 與面向對象編程性質類似，組件化更符合人類思維。打個比方，我們在設計網頁時，通常會把一個界面分成一塊一塊的、用于某功能的特定樣式模塊。Vue的組件化使前端開發更加容易理解，同時MVVM可以更便捷地實現交互，對新手十分友好。 4. 插件化 由于Vue框架的流行性，目前有許多基于Vue的npm擴展包和開發工具（如Vuex）。Vue可以在一個文件下統一管理所有外部插件的全局使用。 5. 便于測試 組件化利于開發者對于單一組件進行測試，很少發生在整個頁面下找不到是哪個地方報錯的情況。 6.運行速度更快 像比較與react而言,同樣都是操作虛擬dom,就性能而言,vue存在很大的優勢 7.視圖,數據,結構分離 使數據的更改更為簡單,不需要進行邏輯代碼的修改,只需要操作數據就能完成相關操作 ———————————————— 版權聲明：本文為CSDN博主「燕穗子博客」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/m0_64346035/article/details/124809501 該文章在 2023/5/20 11:55:48 編輯過 |
相關文章
正在查詢... 
|
400 186 1886
