低代碼平臺(tái)的前端框架采用Vue的好處有哪些？

• 1、Vue是組件化開發(fā)，減少代碼的書寫，使代碼易于理解。
• 2、最突出的優(yōu)勢(shì)在于可以對(duì)數(shù)據(jù)進(jìn)行雙向綁定。
• 3、相比較傳統(tǒng)的用超鏈接進(jìn)行頁面的切換與跳轉(zhuǎn)，Vue使用的是路由，不用刷新頁面。
• 4、Vue是單頁應(yīng)用，加載時(shí)不用獲取所有的數(shù)據(jù)和dom，提高加載速度，優(yōu)化了用戶體驗(yàn)。
• 5、Vue的第三方組件庫豐富，使用起來方便，提高了開發(fā)效率。

一、響應(yīng)式性能提升

1、diff方法優(yōu)化

diff 算法是虛擬 DOM 技術(shù)的必然產(chǎn)物，它會(huì)對(duì)新舊 DOM 進(jìn)行比較，然后將變化的 DOM 更新在真實(shí)的 DOM 上。使用vue，在創(chuàng)建虛擬 DOM 的時(shí)候，會(huì)根據(jù) DOM 中的內(nèi)容添加一個(gè)靜態(tài)標(biāo)記，在數(shù)據(jù)發(fā)生改變的時(shí)候，就會(huì)帶著靜態(tài)標(biāo)記的節(jié)點(diǎn)去對(duì)比，能夠快速找到變化的 DOM 。

2、事件偵聽器緩存

默認(rèn)情況下onClick會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)追蹤它的變化，但是因?yàn)槭峭粋€(gè)函數(shù)，所以不用追蹤變化，直接緩存起來復(fù)用即可。

3、ssr渲染

當(dāng)存在大量靜態(tài)內(nèi)容時(shí)，這些內(nèi)容會(huì)被當(dāng)做純字符串推進(jìn)一個(gè) buffer 內(nèi)，即使存在動(dòng)態(tài)綁定，也會(huì)通過模板插值潛入進(jìn)去，這樣會(huì)比虛擬 DOM 渲染快得多。

二、代碼體積減少

打包大小減少41%。

vue 移除了一些不常用的 API，如：inline-template、filter 等，使用 tree-shaking。

Tree Shaking 搖樹優(yōu)化，指的就是當(dāng)我們引入一個(gè)模塊的時(shí)候，不引入這個(gè)模塊的所有代碼，只引入我們需要的代碼。

在vue 中，引入tree-shaking，所有的 API 都通過 ES6 模塊化的方式引入，這樣就能夠讓 webpack 或 rollup 等打包工具在打包時(shí)，就會(huì)自動(dòng)對(duì)沒有用到的 API 進(jìn)行剔除，最小化 bundle 體積。

初次渲染快55%, 更新渲染快133%。組件選擇了按需引入，使得打包后的體積也更小了，所以項(xiàng)目運(yùn)行的時(shí)候速度更快，更順暢了！

三、編譯被優(yōu)化

vue 使用靜態(tài)提升后，對(duì)于不參與更新的元素，只會(huì)被創(chuàng)建一次，在渲染時(shí)直接復(fù)用就好了。

Fragment模板內(nèi)不用再創(chuàng)建一個(gè)唯一根節(jié)點(diǎn)，可以直接放同級(jí)標(biāo)簽和內(nèi)容。就相當(dāng)于少了一個(gè)節(jié)點(diǎn)嵌套渲染。

四、組合式API

vue 新增了組合式 api ，更有利于維護(hù)和封裝。一個(gè)功能模塊代碼會(huì)集中到一起，實(shí)現(xiàn)高內(nèi)聚，低耦合。提高代碼的可讀性和可維護(hù)性，基于函數(shù)組合的 api 更好地重用邏輯代碼。

五、更好的 ts 支持

vue 新增了 defineComponent 函數(shù)，使組件在 ts 下，更好地利用參數(shù)類型推斷。如：reactive 和 ref 很具有代表性。

六、更先進(jìn)的組件

• vue 中可以不需要根節(jié)點(diǎn)，多個(gè)元素或標(biāo)簽可并列存在。
• 可以把 teleport 中的內(nèi)容添加到任意的節(jié)點(diǎn)內(nèi)，對(duì)于嵌套較深的組件來說絕對(duì)是一個(gè)福音。
• 允許程序在等待異步組件渲染一些后備的內(nèi)容，可以讓我們創(chuàng)建一個(gè)平滑的用戶體驗(yàn)。

七、簡(jiǎn)單總結(jié)：

vue 目前是國(guó)內(nèi)最火的前端框架之一，vue 性能提升、運(yùn)行速度也比其他框架好很多。

總之 vue 就是：

• 讓項(xiàng)目更快
• 讓代碼更少
• 更易于維護(hù)
• 讓我們開發(fā)更快，加班更少

八、使用Vue框架的低代碼平臺(tái)有哪些？

平臺(tái)介紹

織信Informat后端采用Java，前端采用Vue3等技術(shù)框架，包括場(chǎng)景建模、界面開發(fā)、系統(tǒng)對(duì)接、組件拓展、數(shù)據(jù)并發(fā)處理、動(dòng)態(tài)菜單、權(quán)限校驗(yàn)、按鈕級(jí)別權(quán)限控制等功能。而在這之中，織信Informat企業(yè)級(jí)低代碼開發(fā)平臺(tái)對(duì)應(yīng)的就是vue3前端版本！

強(qiáng)大的動(dòng)態(tài)信息數(shù)據(jù)模型可以讓應(yīng)用程序快速生成! 織信Informat引領(lǐng)低代碼開發(fā)模式， 幫助解決企業(yè)項(xiàng)目70%的重復(fù)工作，讓開發(fā)更多關(guān)注業(yè)務(wù)。既能快速提高效率，節(jié)省成本，同時(shí)又不失靈活性。

當(dāng)前版本：V1.14

版本升級(jí)：

• PC端上線“萬能打印模板”
• PC端數(shù)據(jù)導(dǎo)入時(shí)增加數(shù)據(jù)表全字段的模板下載
• PC端日期字段開啟時(shí)間選擇時(shí)，支持精確到秒的輸出
• PC端函數(shù)字段增加數(shù)字轉(zhuǎn)換人民幣大寫支持
• PC端行數(shù)字段增加{ID}類型，以便可以獲取記錄的id
• PC端儀表盤全局變量過濾支持
• 打印模板加入啟用禁用功能
• 打印模板窗口增加保存為照片功能
• 打印模板增加條形碼、二維碼支持
• 審批流程支持回退功能
• 流程審批支持暫存流程數(shù)據(jù)
• 函數(shù)字段增加條形碼、圖片的展示方式
• 全量導(dǎo)出Excel文件內(nèi)容支持按當(dāng)前系統(tǒng)排序展示
• 自動(dòng)化模塊中新增【審批流回退】功能
• 自動(dòng)化模塊中【新增按鈕】支持在審批流程中展示
• 新增瀏覽器【語音通知功能】
• 視圖、字段的權(quán)限控制新增【團(tuán)隊(duì)角色】
• 應(yīng)用升級(jí)支持同步【搜索引擎】模塊
• 自動(dòng)化將URL上傳為附件功能，新增支持修改附件名稱

系統(tǒng)后臺(tái)效果：

?

?

?報(bào)表效果

?

?

?流程審批設(shè)計(jì)

?

?大屏模板

?

?

功能模塊

織信Informat功能大致分為：系統(tǒng)管理、系統(tǒng)集成、系統(tǒng)監(jiān)控、系統(tǒng)權(quán)限、知識(shí)庫、文件存儲(chǔ)、待辦工作流、審批、儀表盤、看板視圖、各類組件、腳本、表單、自動(dòng)化、網(wǎng)站、打印模板等等平臺(tái)功能。更多細(xì)節(jié)功能，由于時(shí)間原因，這里未作提及，感興趣可自行體驗(yàn)了解。

入門須知

使用織信Informat前，建議先閱讀幫助中心詳細(xì)了解各項(xiàng)功能特點(diǎn)、功能位置、如何使用等基礎(chǔ)知識(shí)，以便能處理一些常見的問題。 提前通過幫助中心與開發(fā)文檔了解和學(xué)習(xí)低代碼知識(shí)，會(huì)對(duì)系統(tǒng)搭建理解非常有幫助。

瀏覽器支持：

本地開發(fā)推薦使用 Chrome 最新版瀏覽器，不支持 Chrome 80 以下版本。

生產(chǎn)環(huán)境支持現(xiàn)代瀏覽器，不支持 IE。

?