vue(1)-學習歷程之vue解決jquery的什么痛點

zhaofeihao 發(fā)布于2019-08-02 11:16 / 3270人閱讀

摘要：解決的痛點首先我們需要明白和理解和的設計初衷和理念。所有框架要解決的問題應對需求變化，防止大面積重寫。參考文獻漸進式框架理解核心功能原理解析百度網(wǎng)盤視頻學習以及源碼資源提取密碼

vue解決jquery的痛點

首先我們需要明白和理解jquery和vue的設計初衷和理念。

jquery官網(wǎng)給出的開篇介紹是，jquery是一個快，小，功能豐富的js庫，它讓html文檔遍歷和操作，事件處理，動畫，以及ajax等提供了簡單易用的API，并且可以在眾多瀏覽器中使用。

jQuery is a fast, small, and feature-rich JavaScript library. It makes
things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works
across a multitude of browsers.

所有js庫要解決的問題*：簡單語法（查找DOM元素，對DOM元素進行操作）解決瀏覽器兼容性問題

jquery這個js庫比其他js庫受歡迎的地方在于：所有一切都在jquery對象里面，入口是查詢，結果是操作

庫，開發(fā)者自由控制，搭建前端

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。
所有js框架要解決的問題*：應對需求變化，防止大面積重寫。讓開發(fā)者遵循框架的規(guī)范和規(guī)則構建項目，追求高效，團隊協(xié)作，代碼利用率和可擴展性
vue這個js框架比其他js框架受歡迎的地方在于：

組件化：一個大型頁面切分成一個一個更小的可控單元；方便后續(xù)優(yōu)化，使用組件可以降低模塊耦合度，組件所依賴的資源全部封裝在組件內部調用。

數(shù)據(jù)偵聽，雙向綁定：(js中有兩種方法可以偵測到變化，object.defineProperty和ES6的proxy)vue使用的是object.defineProperty.
我們之所以要觀察一個數(shù)據(jù)，是為了當數(shù)據(jù)發(fā)生變化時，可以通知到使用該數(shù)據(jù)的地方。先把使用該數(shù)據(jù)的地方收集起來（術語是收集依賴getter），當變化時，再觸發(fā)依賴setter
依賴收集到哪，數(shù)組Dep,存儲依賴。
數(shù)據(jù)變化時，我們需要集中通知給各個地方，讓中介watcher來通知吧

客戶端路由：單頁面應用，不做就不需要，一個url對應一個應用

大規(guī)模狀態(tài)管理： 應用簡單時，一個基礎狀態(tài)和界面映射就可以解決問題，應用很大時，涉及多人合作，需要多個組件之間共享，多個組件需要去改動同一份狀態(tài)，如何使大規(guī)模應用高效運行。

構建工具：打包和工程構建

漸進式vue框架，自底向上增量開發(fā)，為什么選擇vue而不是jquery

你不想用vue的數(shù)據(jù)驅動DOM變化，不想組件化，那你可以用vue當成一個js庫來使用，簡單的收集form表單，表單驗證。如果你碰到多次改需求，你會發(fā)現(xiàn)vue要改的代碼比jquery少的多。

大膽一些，你想把整個頁面的dom用Vue來管理，如新聞列表用v-for來循環(huán)，評論交互有些復雜，你抽象成小組件，這個過程就會把關注點從原來的jquery dom操作變成關注數(shù)據(jù)變化。于是你開始用虛擬dom，數(shù)據(jù)雙向綁定，差量更新

你要做個webApp，于是你了解webpack vue-router,你發(fā)現(xiàn)前端可以控制路由了，vue-router單頁面卻可以切換組件，不是f5刷新的感覺

滾動播放視頻，前端和后端的接口溝通很頻繁，大量的數(shù)據(jù)在組件中共享，你找解決方法，發(fā)現(xiàn)vueX處理數(shù)據(jù)在組件之間流動得心應手。

慢慢的你開始關注用戶數(shù)據(jù)增長，你發(fā)現(xiàn)第2部，新聞列表和評論整個頁面用vue管理開發(fā)很方便，但是頁面白屏時間長，類似這樣的底層頁對seo很不好。你開始考慮vue 2.0的SSR。為了保證團隊高質量輸出，你開始研究給vm寫單元測試....

綜以上5點，我真的不知道有什么理由不用vue，因為你用了vue，你也可以用jquery啊，在vue中什么時候用Jquery會更高效，答案是動畫。因為vue側重數(shù)據(jù)。

參考文獻：

vue漸進式框架理解：https://www.zhihu.com/questio...

vue核心功能原理解析https://www.cnblogs.com/dhsz/...

百度網(wǎng)盤視頻學習以及源碼資源https://pan.baidu.com/s/1bpD6hUR 提取密碼 aebz

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52880.html

GridManager 開源歷程

摘要：歷程啟動于年月日不曾想這一堅持已經(jīng)多天了。每個午飯后晚飯前。期間對的認知與實踐提升明顯，并沉淀下名為的類庫。每次發(fā)布前的，成為一種風險把控。在此之前從沒有如此的認同單元測試，也相信這終將會成為一種大家都遵守的契約。 GridManager歷程 GridManager 啟動于2015年02月10日, 不曾想這一堅持已經(jīng)1200多天了。總想為此記錄些什么，但一直未曾動手。午飯后，公司很安靜...

honhon 2019-08-22 18:48 評論0 收藏0
前端的發(fā)展歷程

摘要：前端的發(fā)展歷程什么是前端前端針對瀏覽器的開發(fā)，代碼在瀏覽器運行后端針對服務器的開發(fā)，代碼在服務器運行前端三劍客超文本標記語言是構成世界的基石。前端的發(fā)展歷程什么是前端前端：針對瀏覽器的開發(fā)，代碼在瀏覽器運行后端：針對服務器的開發(fā)，代碼在服務器運行前端三劍客 HTML CSS JavaScript HTML HTML（超文本標記語言——HyperText Markup ...

劉明 2019-08-23 14:17 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0