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

vue解決jquery的痛點

首先咱們須要明白和理解jquery和vue的設計初衷和理念。
  1. jquery官網給出的開篇介紹是,jquery是一個快,小,功能豐富的js庫,它讓html文檔遍歷和操做,事件處理,動畫,以及ajax等提供了簡單易用的API,而且能夠在衆多瀏覽器中使用。html

    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對象裏面,入口是查詢,結果是操做vue

    庫,開發者自由控制,搭建前端
  2. Vue (讀音 /vjuː/,相似於 view) 是一套用於構建用戶界面的漸進式框架
    全部js框架要解決的問題*: 應對需求變化,防止大面積重寫。讓開發者遵循框架的規範和規則構建項目,追求高效,團隊協做,代碼利用率和可擴展性
    vue這個js框架比其餘js框架受歡迎的地方在於:jquery

    組件化:一個大型頁面切分紅一個一個更小的可控單元;方便後續優化,使用組件能夠下降模塊耦合度,組件所依賴的資源所有封裝在組件內部調用。webpack


    數據偵聽,雙向綁定:(js中有兩種方法能夠偵測到變化,object.defineProperty和ES6的proxy)vue使用的是object.defineProperty.
    咱們之因此要觀察一個數據,是爲了當數據發生變化時,能夠通知到使用該數據的地方。先把使用該數據的地方收集起來(術語是收集依賴getter),當變化時,再觸發依賴setter
    依賴收集到哪,數組Dep,存儲依賴。
    數據變化時,咱們須要集中通知給各個地方,讓中介watcher來通知吧web


    客戶端路由:單頁面應用,不作就不須要,一個url對應一個應用ajax


    大規模狀態管理: 應用簡單時,一個基礎狀態和界面映射就能夠解決問題,應用很大時,涉及多人合做,須要多個組件之間共享,多個組件須要去改動同一份狀態,如何使大規模應用高效運行。vue-router


    構建工具:打包和工程構建後端


漸進式vue框架,自底向上增量開發,爲何選擇vue而不是jquery數組

  1. 你不想用vue的數據驅動DOM變化,不想組件化,那你能夠用vue當成一個js庫來使用,簡單的收集form表單,表單驗證。若是你碰到屢次改需求,你會發現vue要改的代碼比jquery少的多。
  2. 大膽一些,你想把整個頁面的dom用Vue來管理,如新聞列表用v-for來循環,評論交互有些複雜,你抽象成小組件,這個過程就會把關注點從原來的jquery dom操做變成關注數據變化。因而你開始用虛擬dom,數據雙向綁定,差量更新
  3. 你要作個webApp,因而你瞭解webpack vue-router,你發現前端能夠控制路由了,vue-router單頁面卻能夠切換組件,不是f5刷新的感受
  4. 滾動播放視頻,前端和後端的接口溝通很頻繁,大量的數據在組件中共享,你找解決方法,發現vueX處理數據在組件之間流動駕輕就熟。
  5. 慢慢的你開始關注用戶數據增加,你發現第2部,新聞列表和評論整個頁面用vue管理開發很方便,可是頁面白屏時間長,相似這樣的底層頁對seo很很差。你開始考慮vue 2.0的SSR。爲了保證團隊高質量輸出,你開始研究給vm寫單元測試....

綜以上5點,我真的不知道有什麼理由不用vue,由於你用了vue,你也能夠用jquery啊,在vue中何時用Jquery會更高效,答案是動畫。由於vue側重數據。

參考文獻:

  1. vue漸進式框架理解:https://www.zhihu.com/questio...
  2. vue核心功能原理解析https://www.cnblogs.com/dhsz/...
  3. 百度網盤視頻學習以及源碼資源https://pan.baidu.com/s/1bpD6hUR 提取密碼 aebz
相關文章
相關標籤/搜索