新舊交替VueJs到底好在哪？

01-11

本人想在公司生產環境使用Vue開發，老式的套頁面方式，責任制不明顯，需求變更不好維護，如果用Vue開發，能帶來什麼好處？前端的工作成本會增加多少？還是減少了？

我覺得使用webpack+vue開發之後，網頁中各種交互狀態可以很方便維護不用在直接獲取dom操作dom來實現交互了。使用vue單文件組件，組件化就可以輕鬆地復用和維護了。

時間選擇組件 GitHub - hilongjw/vue-datepicker: calendar and datepicker component with material design for Vue.js

最近項目正好需要輪播，寫了個vue組件，等一段時間完善之後發出來

可把頁面組件化、模塊化，分工明確，誰也不干涉誰，並且組件可復用
解放雙手，讓框架來進行DOM操作，不需要自己手寫
分離前後端，前端只寫前端，後端只寫後端，敲定數據結構後前端使用mock data開發，等後端的API開發完畢，大家一串聯就OK，當然還需要一些前端的自動化構建工具，如webpack
至於 @xuhui 提到的日期，輪播圖之類的插件，可以通過封裝組件來實現具體怎麼實現得自行理解了，GitHub - galenyuan/vue-datepicker: A date picker for vuejs 我自己正在造一個date picker的組件，不過還在開發中，自己水平也不怎麼地，求各位大神輕噴
代碼簡單明了，在HTML上就能看出這個元素綁定的是哪個model，其他人接手代碼時容易上手

首先提示一點：

Vue.js 不支持 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能實現的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。

我使用vuejs也有一段時間了，公司的項目中也做了些嘗試，覺得很方便。因為vue讓我們不用再去頻繁的操作dom，只需要關注數據就好了。dom等更新，vue來完成。而且，vue提供了簡單的方法來實現自定義組件和指令，能夠將複雜的業務需求拆分到一個個組件中。方便使用和維護。

而且，vuejs 對於老項目的改造也比較方便。個人小項目入手也簡單。

1. 公司的項目

這個項目原本是node後端來渲染模板，requirejs來做模塊化載入，然後用zeptojs來做交互。但是有一些頁面表單比較複雜，各種狀態，約束，控制，ajax，比較多。原本用zeptojs的方式管理，數據和dom操作混雜在一起，很不方便維護。

我接手的第一個任務是改造日曆組件，原先的日曆使用zeptojs做的，代碼行數大概有500+。看了半天，將將看懂。覺得如果改造（增加一些特性）的話，需要加很多 if else。而且，這個組件的模板是在 node 模板里寫的。也就是說，任何地方想要使用日曆，不僅要手動載入js，還要在頁面中copy一個模板。而且我接下來的任務是大概要在4-5個頁面中加入日曆。

覺得以後的維護是個巨坑，遂毅然採用 vue 改造。當時對 vue 只是有耳聞而已，突然要做項目，而且是公司項目，必須謹慎。所以做了很多練習和研究，以及如何在requirejs的架構中引入vue組件。大概搞了3天，完成。這個時候，那4-5個頁面還完全沒有加入日曆。

接下來的事情其實就是非常簡單的導入。 而且因為 vue 組件把數據和方法外部也方便訪問（如果是angular就沒這麼簡單），所以和原有zeptojs的結合也比較順利。

對了，最後的日曆組件，代碼大概減少到200多，而且是在摻雜了很多業務特性的情況下。如果單純做日曆，還可以再壓縮。而且，只是局部的採用vue，避免了全面引入新技術帶來的風險成本。

2. 個人小項目

個人習慣，看到有想實現的東西，就去寫代碼。所以就有了這個 json view ： AC 。使用了https://github.com/vuejs/vue-loader，可以做單文件組件=將組件相關的js，css，template都整合在一個文件中。再加上 hot load。開發起來那叫一個爽快。

和後端的交互

現在的發展趨勢是，前端把以前後端管理的很多東西，比如路由，模板等工作都拿過來了，帶來的好處就是，後端只需要關注數據，安全，效率就好了。而由前端總覽頁面，邏輯，交互，等等貼近用戶的東西。當然，前端的工作量肯定是大了。但是聰明的前端會使用更多更好的先進的技術和思想提高效率。這就是下面前端的成本問題。

前端成本

前端的學習成本肯定是增加了，如果只是對jquery，zepto的傳統lib有經驗的話，入手起來還是需要一些時間的。隨之而來的需要學習的東西比如打包工具， gulp，webpack，新語法，es6，sass，等等。但是帶來的好處也是顯而易見的，開發效率更高了，後期擴展和維護也更簡單了。

其實百聞不如一見，如果對一個東西存在疑問，不如去試一試。vue 入門很簡單。

附官網：vue.js

我前端後端都寫，很負責責任的告訴你前後端的工作量都會變小，最讓我滿意的莫過於，再也不用在頁面里新建N個隱藏域，而是直接操作 js變數，來和我一起享受數據驅動視圖的便捷吧！

同求，本人對vuejs做過測試，mvvm模式有些了解，只是涉及到ajax請求、dom交互中需要用到的插件比如日期插件、輪播圖等問題不知如何解決，請已有解決方案的大流給予解答，不勝感激涕零