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