一、要使用前端框架來構建頁面的原因
因為提高開發效率,對于企業來說,時間就是效率,效率就是錢。
在沒有前端框架之前,我們前端需要經常的操作DOM元素;在項目中,vue能夠簡化DOM操作,讓程序員根本不用操作任何DOM元素,就能渲染 頁面;企業中,使用框架,能夠提高開發的效率;提高開發效率的發展歷程:原生JS -> Jquery之類的類庫-> 前端模板引擎->Angular.js/Vue.js(能夠幫助我們減少不必要的DOM操作;提高渲染效率;雙向數據綁定的概念【通過框架提供的指令,我們前端程序員只需要關心數據的業務邏輯,不再關心DOM是如何渲染的了】)在Vue中,一個核心的概念,就是讓用戶不再操作DOM元素,解放了用戶的雙手,讓程序員可以更多的時間去關注業務邏輯;增強自己就業時候的競爭力基礎JS基本功,JS高級,PHP,Jquery,H5C3+移動Web提高Nodejs,前端三大框架,React-Native(使用前端的技術HTML+CSS+JS,去開發手機App)延伸閱讀:
二、前端框架到底解決了什么問題
框架其實就解決了一個問題——使用聲明式語法,描述組件對象的嵌套關系,并自動生成與dom對象的對應關系。
自己敲過框架輪子的人一定明白我在說什么——你在自己寫框架的時候,最難處理的不是數據驅動,observable庫有的是,也不是事件監聽,那玩意兒jquery已經做的很好了,更不是模板語法,誰還寫不出個模板轉render的函數?真正有點麻煩的問題是:
dom對象以及他們的從屬(同時是傳遞關系)關系,是通過html自動生成的,然而當你把“組件”抽象為js對象,你怎么能實現子組件的自動創建,自動銷毀,自動數據傳遞,自動render,自動事件監聽(不一定是dom事件)?怎么把js組件對象存在它應該在的地方(我的標題圖截得是preact源碼解決這個問題的部分,preact的子組件實例,是存在dom節點上的),并且rerender的時候能把js組件對象和dom節點對應起來?什么時候需要new,什么時候復用原來的組件?組件重渲染之后,怎么commit到dom上?這套機制,才是前端框架真正替你省力的“臟活”,因為不如此,你的組件根本集成不起來,“組件化開發”、“數據驅動”也就無從談起。至于框架對外提供的那些特性和語法糖,其實都見仁見智,有人喜歡有人不喜歡。但是我前面說的那些臟活,才是一個框架之所以是一個框架的理由。
關于這套機制,類angular框架和類react框架分別講了兩個故事——
angular講的故事是“模板編譯為能精細感知model變化事件的dom-commiter”。react講的故事是“model怎么變不重要,我只要model當前狀態,我有辦法給你patch到dom上”。表面上看起來是很不一樣的,但是本質上都是做同一件事——你在模板里面也好,jsx里面也好,使用組件時寫的的都是組件的類型,然而實際render的時候,框架幫你自動創建了組件實例。第二次render的時候,框架又幫你做了兩件事,名列前茅件事是,幫你找到應被復用的組件實例,指揮他重新render一遍,第二件事是,幫你把render的結果commit到正確dom節點上。