求助：尤雨溪先生vue的live。本人現在一臉蒙。想請教一下各位關於這期的live?

01-11

在聽，完全聽不懂。現在心情很是急躁。如果哪位大神聽的懂，麻煩說一下，可以付錢（根據內容質量而定）。畢竟除了這個，我也找不到其它感謝方式了。100元二名，十元十名。請原諒我。因為這是我一個月的生活費了。如果優質回答多的等方面，可以100元追加到五名。十元就不追加了。感謝費五元五名。

補充，100元已經進賬，感謝題主！

--------------------------------

聽眾來答，必須說，尤雨溪先生洋洋洒洒講了一個多小時，應該透支了吧，聽的我都累了。

首先，先生分享的不是一個問題，這場 Live 是講前端框架的，不是講 Vue 的。然後前端框架重點在最近這兩三年前端、前端框架的技術思想和實踐。如果這些內容要抽絲剝繭，逐個講下來，至少還可以開 30 場 Live。

沒聽懂很正常，可以套一下28理論，這場 Live，20% 的前端可以聽懂 80% 的內容，剩下 80% 的前端，只能聽懂其中的 20%。

你大可不必急躁，畢竟你還年輕。如果你天資聰慧，肯鑽研和實踐，花半年到一年的時間，圍繞著前端框架、前端工程化、前端優化、跨端開發仔細鑽研，再回過來看這場 Live，你可以成為 20% 的前端。我把今天的一些關鍵詞給你列一下：

框架：Vue/React/Angular/Angular2
路由：vue-router/react-router
跨端：Weex/React Native/Native Script
狀態管理：vuex/Redux/Mobx
預處理器：PostHTML/PostCSS/Babel
構建工具：Webpack/Gulp/Grunt
CSS in JS
TypeScript/Flow
SSR
GraphQL/Relay/Apollo
rxjs
...

我聽到的一些點：

現在前端路由類庫，都把路由當做組件處理，路由的狀態為組件的狀態。react-router 4 則傾向各個組件來對接路由；尤大覺得不好（尤大更正：React router 4 也不是不好，只是在靈活性的同時也有一些捨棄的東西，不是 pure gain）；
推薦使用 TypeScript，更好的生態和 IDE 支持；
Meteor 目前全力開發Apollo；
不從場景出發的技術選型都是耍流氓；
Vue 組件層面是 push，裡面是 virtual dom（尤大更正）；
關於 Vue 未來的打算，讓你們可以看看前端外刊評論 - 知乎專欄，這兩天會發他的專訪談到；
...

鑒於回答這個問題只值 10 元或者 100 元，那就答到這裡吧。

雖然沒邀請我，我還是準備來強答了。

今天正好8點多收到知乎的提醒，聽了20分鐘，後來中間去做了一會家務，回來又專門把後半段聽完了，收穫很多，給五星，屬於我聽過的乾貨最多的live了。（當然我貌似只完全聽過我自己講的），還特意跑去對比了一下live風格，確實沒有小尤說的穩。。

為什麼我說乾貨多，我剛才也看了一下目前已有的評分，也包括這個問題下面的，聽懂的人還是佔少數，其中不少知識點我也是僅僅聽過而已，可能連文檔看都沒有看過。。

對於我目前的階段來說，這種live其實就是我想要的乾貨，因為讓我這個階段的人知道了很多以前不知道的一些技術點和框架之間設計的取捨原則，又都用通俗易懂的幾句話把這個東西的作用，設計原理以及解決什麼問題概括的比較明白。這對我來說收益是巨大的，對平時的技術選型和技術提升是有非常大的幫助的。

因為目錄是公開的，所以放上來應該也是沒有什麼問題的：

? 前言：不同框架的定位與適用場景
? 組件的理解和分類
? 變化偵測機制
? 路由 ? 狀態和數據流管理 ? 數據抓取和同步
? CSS 管理方案
? 構建工具鏈 ? 同構/服務端渲染
? 跨平台渲染
? 類型系統
? 構建時優化
? 運行時優化
? Web Components 和框架的關係
? Web Assembly 和框架的關係

但是實際講解的時候，有幾個部分是合併的，有幾個部分是直接貼了鏈接或者知乎回答的，原因還是live的時間太短了，這麼多內容每個細講非常不現實，我比較有體會。。後邊比較大塊來說的主要是組件部分，不同框架的對比，設計理念以及類型區分，狀態變化的檢測原理，幾個主流框架曾經的版本和目前的版本實現對比思路，以及vue目前的一個取捨原則和實現，然後路由部分的設計思路以及如果自己實現會踩到的一些坑，路由和組件之間的關係等，後邊大塊部分時間又開始講了一些css的管理方案，主要就是傳統的css維護方式比如BEM或者OOP CSS與組件的開發方式css in js的比較，又針對一篇專門來說css in js的文章概括了幾個優勢點，但是後來又一一給出了如果不用css in js的方式也是可以實現的方案，哈哈。後邊說構建工具啊，跨平台啊，構建時和運行時的優化部分，多次提到rxjs的好處，grunt，gulp，webpack，rollup等等這些東西的對比就不說了，屬於常識問題，我目前還有印象的，覺得比較有意思的是對數據獲取那部分的兩個實現方式，一個是curd的api設計簡單應用來說大家常見的，一個是通過類似DSL方式讓客戶端來實現更豐富的關係查詢，然後說把資料庫做到端上，比如GraphQL等，基本是個引子，告訴大家有這麼個東西，解決的是什麼問題，怎麼一步一步就發展出來的。最後說了一下新概念的理解，就是目錄最後兩個概念點的理解，話不多，但是點透了他們對現在的框架開發的短期和長期影響。

基本上面的都不算劇透，還是推薦大家自己購買反覆去聽吧，其實倒不是多難懂的東西，主要還是看你的接觸面廣度，這算是開拓視野的一個live，透過框架本質看問題更有助於我們對自己已有和未來的技術方案做取捨。

目前來看，編程就是在不斷的做取捨，框架設計也是，這個live的目的也是告訴大家，目前的框架設計的取捨點以及為什麼這麼設計而不那樣設計的問題。

其中很多地方小尤的看法和我的不少想法都是非常一致的，怎麼說呢，莫名其妙的聽完還挺開心，至少覺得自己還不算落伍的前端吧。

希望這個簡單的概括對題主有幫助，在某一段說到jade和sass的時候還黑了當某人一下。。不知道你們有沒有發覺。

有說的不對的地方，還是得見諒，畢竟語音形式的，難免有記錯或者我能力有限理解不了的，哈哈。

裡面英文的名詞有點多，我感覺你需要有人給你把裡面的英文單詞列出來（@尤雨溪如果有個大綱的話可以在 Live 里貼一下），挨個查一遍。不需要深入學每一個框架和技術方案，但是如果你能搞明白每一個是幹啥的，理解大致的原理和存在的意義，那你對現代化的前端開發就會有一個不錯的整體認知。

乾貨滿滿的一次 live
共享一些尤大推薦的資料吧（自備梯子，大部分在微博也有同步所以應該不算對不起買單的人了）
可以看到信息量很大樓主不必慌查詢學習這些資料也是對自己很大的提升

http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/ ［vue源碼的分析］

https://docs.google.com/presentation/d/1_BlJxudppfKmAtfbNIcqNwzrC5vLrR_h1e09apcpdNY/edit?usp=sharing ［2016年巴黎DotJS尤雨溪演講ppt］

https://jsfiddle.net/yyx990803/0a22ojps/ ［如何把 Vue 當 redux 用］

https://jsfiddle.net/yyx990803/f5a24dk3/ ［如何讓 Vue 當 MobX 用］

https://speakerdeck.com/vjeux/react-css-in-js ［最早的css in js的方案］

https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 [css module 作者對css in js的看法]

https://www.zhihu.com/question/20790576 ［張雲龍關於部署方面的解答］

https://www.zhihu.com/question/58731753 ［web component相關的看法］

題主這種知識付費的態度很贊啊。

我是Angular1.x和Vue的開發者，一個業務boy。整場live下來我的表情可以分為3部分——哎呦！哎呦？哎呦......

哎呦！，因為開發業務，對框架對比部分、變化追蹤部分我能很好理解尤大對他的選擇的解釋。因為他說的那些問題我都遇到了，感同身受嘛。
哎呦？對於狀態管理，因為就接觸了vuex所以對不同選擇的對比有些倒懂不懂
哎呦...... rxjs沒有用過，只能默默嘆氣了

不過我還是收穫滿滿嘛，在哎呦？部分講到了virtual DOM，之前只知其然不知其所以然，所以以此為契機搜了很多資料，目前正在跟著深度剖析：如何實現一個 Virtual DOM 演算法 · Issue #13 · livoras/blog 敲一個簡易版的virtual DOM。

所以如果題主一臉蒙，那從敲一個Vue TODO List開始，用不了多久你就會發現能聽懂更多了。

一起加油吧，少年～

昨天聽尤大的live個人感覺是乾貨還是滿滿的作為一個live應該已經超時了尤大很認真的回答了知友的提問贊一個。

? 前言：不同框架的定位與適用場景
? 組件的理解和分類
? 變化偵測機制
? 路由

? 狀態和數據流管理
? 數據抓取和同步
? CSS 管理方案
? 構建工具鏈
? 同構/服務端渲染
? 跨平台渲染
? 類型系統
? 構建時優化
? 運行時優化
? Web Components 和框架的關係

? Web Assembly 和框架的關係

本場live主要內容就是上面所訴的。前面大部分的內容屬於聽懂的(部分尤大蹦出的英文單詞不了解的話認真聽幾遍google一下部分真的是沒聽懂本人英文水平一般)，後面屬於半懵逼狀。個人總結了下想要聽得懂得自己做過或了解過連一個概念都沒有的話聽著自然一臉懵逼這也應該是題主的困擾吧。

---------------- 我是分割線 -------------

開始講正題,講點我昨天聽懂的。剛開始前言就已經講到了

框架、工具、源這些東西不講場景都是耍流氓

不同場景來選擇相應的工具, 透過這些框架都一些表層內容，了解他們需要解決什麼問題然後對這些問題中的細分做一些梳理尤大最開始就已經點明了主題然後我們就帶著這個主題去好好的了解下這次live(出於本人以及付費去聽live的人來說直接說這個live感覺對我們不是很公平接下來只講本人的一些理解以及個人整理的大綱)

--------------- 組件 ----------------

組件可以是一個函數 —— react給我們揭示的一個事實

從以前的界面 =&> 到組件的一個概念，尤大將組件分為四類，接入型、展示型、交互型以及功能型，然後介紹了下這四種組件以及對應的例子與應用場景(具體尤大在live里有講到部分聽不懂的單詞多聽幾遍)

ps.中間插入了一個知識點 模板 vs jsx

--------------- 渲染機制 ---------

命令式渲染(jQuery) -&> 就是干 -&> 後期會寫的又臭又長,維護很麻煩

聲明式渲染 -&> 數據跟DOM的映射關係

--------------- 變化偵測 ---------

push and pull

Angular的臟檢測就是pull, vue中的watch就是push

pull更新力度比較粗，react中有一些diff演算法能提高pull的效率

push會佔用比較多的內存以及依賴追蹤，有一定的代價

vue2.0採用的是混合式的，組件用的是push 若有一個組件內的信息改變了就馬上知道是哪個組件改變了然後通過pull 更新組件內的被改變的元素 =&> 這裡延伸一點按照vue2.0的機制不適合把一個組件做的非常大每個組件儘可能的小對性能而言會比較好 (個人的理解)

ps.此時一個小夥伴的問題尤大的回答好好聽一下漲姿勢了

--------------- 狀態管理 ---------

Flux =&> redux、mobx、vuex

源事件 -&> 狀態的改變 -&> UI的變化

聲明式渲染已經解決了 狀態的改變 -&> UI的變化

狀態管理則主要解決 源事件 -&> 狀態的改變 這步的問題以及將其剝離出來便於維護

尤大提到了 rxjs 本人沒用過不做評論之後會惡補下相關知識
組件的局部狀態以及全局狀態如何區分？

--------------- 路由 ---------
URL衍射到組件樹

App里的路由 vs Web里的路由

尤大拋出一個問題如何做一個類似於與App內的路由,為了更好的跟native app競爭？

--------------- css方案 ---------

主流的css方案有四種

跟 JS 完全解耦
CSS Modules
各類 CSS-in-JS 方案 (react 為代表)
Vue 的單文件組件 CSS

這段尤大發了一些的文章近期會好好看一下之後提出了傳統css的一些問題以及一些解決方案

作用域
Critical CSS
Atomic CSS
分發復用
跨平台復用

講到了一個 ssr過程中遇到的一個問題 css若在界面載入之後再載入出來後在出來就會出現讓用戶遇到一個沒有css的界面再閃過變回正常界面。這也是我在實際過程中遇到的問題 2.3里有解決方案等研究下嘻嘻。。。

--------------- 構建工具 ---------

磨刀不誤砍柴工構建工具就是磨刀

講了一下主流構建工具以及構建工具能幫我們解決的問題

因為瀏覽器的限制我們前端需要去構建去兼容各大主流的瀏覽器通過各種預處理器 postcss等工具能很好的幫我們做到這些

--------------- 部署前端 ---------

可以好好看張雲龍老師的回答

https://www.zhihu.com/question/20790576

--------------- 就這樣吧 ---------

就這樣吧，聽到這塊信息量已經非常大了後面的有點消化不良最後附上尤大的結束語

技術方案都是先有問題，再有思路，同時伴隨著取捨。在選擇衡量技術的時候，盡量去思考這個技術背後是在解決什麼問題，它做了怎樣的取捨。這樣一方面可以幫助我們更好的理解和使用這些技術，也為以後哪天你遇到業務中的特殊情況，需要自己做方案的時候打好基礎。

尤雨溪的 Live 說了哪些技術名詞？（上篇） - 知乎專欄

你需要了解的概念太多了，聽不懂很正常。

還沒列舉完，等我寫下篇。

你看完我列的鏈接，再去聽 Live 比較好。

你覺得小學生能不能聽懂微積分？

基礎打好再聽不遲，反正已經買了

知乎live的形式並不能做到讓你深入理解一些東西，更多的是提供你一個思路，增加你的知識面的廣度，對於大多數以業務為主的前端開發者來說，很容易自我滿足~這些名詞可能每一個都是一個新的領域，還是以提升知識面為主吧，每個詞都可以搜索出來很多東西。。。

尤大有一句話說的挺好，閱讀源碼更加有利於你理解前端工程化，以及技術細節，對於自己做方案是比較有利的，但是對於多數的業務沒太多用途

當你聽不懂的時候，就說明這些東西對你來說還不是問題。

我剛聽完live，作為一年經驗的前端小菜鳥，我知道尤大大概在說什麼，但是感覺對於當下幫助不大。

建議題主先好好學基礎，等做到高級了自然就明白了。實在想知道可以Google和GitHub上了解。

其實尤大佬對他live已經總結地很清晰了（可以去翻live）。

具體問題具體分析，不同場景用不同解決方案，框架只不過是提供了一個比較系統化的解決思路。又沒有銀彈，你對框架理解有多深就代表你能用框架做多少事情、踩多少坑以及能從坑裡跳出來的次數。

比如說吧，我是用NG的，雖然尤大在live中只是提及了幾次NG，大部分時候舉例子都在舉react和vue的。不過聽了live後我感覺以後在用NG和學NG的過程中有了更清晰的方向。

比如說：

框架的定位與適用場景
NG比React和vue更適用於重型CRUD業務，但學習成本很高
組件思想
NG組件是一個樹結構。組件過多可以用模塊管理組件。
變化偵測機制
NG提供了臟檢查、生命周期函數ngDocheck和ngOnChanges等解決方案
路由
導致NG從2到4的版本號變更的罪魁禍首,ionic的路由又不一樣。不過肯定是要和組件配合著用。
狀態和數據流管理
NG提供了幾種解決方案：服務、Input、Output等等，rxjs用的也很廣泛
CSS 管理方案
NG介入了shadow DOM的概念管理CSS
構建工具鏈
主流是使用webpack
數據抓取和同步
和協商後端介面用REST還是GraphQL的解決方案
同構/服務端渲染
NG提供了Universal這種方案
編譯優化
NG提供了AOT這種方案

…

他在live中說的那些名詞以及解決方案圍繞這個核心思想講的。這些東西也都是各路前端在解決實際問題中產生的。各有各的看法，各有各的利弊。

至於具體細節，翻翻live就是了。29.9對於這場live來說真不貴。

可以反覆聽，特別是自己寫代碼的時候遇到了框架上的問題時。

謝邀。

不過我沒有訂閱尤雨溪先生關於Vue的Live，也沒法給予你直接的幫助，但我可以告訴你方式方法。

首先，Live是付費才能收聽的內容，不適合在公開的場合來討論內容，不然，這對已經付費的朋友不公平，最好找一起參加過這個Live的朋友私下討論。

Live的內容應該是可以事後再聽的，哪裡不懂的話，根據關鍵詞去搜索相關內容，對背景知識有了根深了解，再去聽一遍，會有新的收穫。

學習這事沒什麼可急躁的，慢慢來。

只能說你還沒入門前端。

自己知道不懂就自個彌補知識咯。求助是沒有用的，用筆記列出來哪些詞語和概念沒懂，做個TODO LIST。

學習前端的過程，順便接近一下相關的方向，或者專門找資料學習一下就行了。相信搞懂後和現在就不是一個級別了。

當然，基礎先牢固，不然一下子接受大量的知識也是比較費勁的。一步一步紮實慢慢來。

個人感覺Live 內容很多，不錯的，目前聽過最豐富的Live。沒有之一。當然我聽的也不多。

還沒結束，你可以在最後提問一下，聽不懂咋辦，看尤大怎麼說

100元？要是有人能把 Live 裡面所有的方面給你講明白，10w 我覺得都不多，因為要知道當你達到了搞明白 Live 中所有內容的水平，找到 20k+ 薪資的工作可以說輕而易舉。

前半部分還好，到後來講web compinents和服務端渲染基本聽不懂，原因有幾個，一個尤大喜歡用英文，有時候一句話蹦出三四個英文專有名詞，假如你沒了解過這個技術肯定是一頭霧水，比如他說的rxjs，不了解的人聽不懂，加上發音問題，我搜了ixjs，exjs都搜不到，所以說尤大是默認你對目前流行的前端技術都有很深的了解和認識的情況下跟你說的，顯然不是個入門教程。

另外，還是要對不同技術有了解，比如尤大比較flux，redux，後來又說了一個後端中間層的庫，後來又講到服務端渲染，技術細節都是一筆帶過，強調的是技術之間的優劣，假如你連這些技術本身都不熟悉，又怎麼能聽懂橫向比較呢。

這個live，對你想入門vuejs做業務開發肯定沒什麼幫助，對非前端想了解前端技術肯定也沒什麼幫助，因為要聽懂是要建立在對前端整個技術發展史和分支有全面了解的情況下。有幫助的是，前端技術流，對各種新技術了如指掌，純鑽研技術對業務開發不感興趣，想自己寫一份vuejs的人。

不邀自來，完整地聽了尤神的live，說一說缺點和優點吧。

缺點:

1.剛開始環境有點吵，影響了聽的效果，當然後面安靜了不少。

2.英文出現頻率略高，對有些國內開發者不是特別友好

3.好的我找不出第三點了

優點:

如果你是一個前端剛入門的人，可能這次尤神的live對於你並不會有那麼大的幫助，甚至會如題主所言: 我聽的到底是什麼？怎麼好多聽不明白？

但是，當你有一定地項目經歷，對前端領域有一定較為宏觀地認識後，你必然會有如下一些思考: 複雜的數據流如何管理？如何進行頁面的優化？如何保持部署上線的層次性？等等。

這些問題都不是簡單地SO一下就能出來，相反，它們都需要結合現有技術棧和自身的情況來進行定製。自身的情況好說，但是對技術棧呢，產生這麼高屋建瓴的認識並不是一件容易事。

所以，尤神的live就是從一個知名框架的作者的角度，來描述他對前端不同技術棧的看法和原因。尤神的話不是金玉良言，但是他山之玉可以攻石。

希望題主可以保留這個live，等到項目經歷略微豐富一點再來回頭聽，當然說不定那個時候的前端又是一片繁花錦簇了。

印象最深的點：可維護性。

最好玩的點：「就是干」。

1、以前用jquery就是干，但命令式不好維護，所以要改成聲明式，你就維護狀態就行，框架幫你把狀態變成UI。

2、以前寫前端就是干，現在要npm一堆包，要用webpack配置半天，但可以一勞永逸。

最冷的點：udp。

…

雖然有些答非所問，但我覺得可以抱著欣賞欣賞尤大的風采的態度來聽，而不是要弄清楚每一個細節，因為尤大這個live的目的也不是告訴你怎樣處理好業務里的細節，而是站在一個設計者的高度來點一點前端圈裡討論最多、最有前景的方向的來龍去脈。聽不懂也沒關係呀，至少知道了這些方向才是需要努力的地方，而不是什麼兼容ie、死磕命令式等奇怪的方向。

題主，啥也不說了，你先補下JS吧

你要能聽懂裡面的東西，至少得用框架寫幾個應用吧

實踐出真知，然後再用理論反哺實踐吧

這個階段的live對你來說有點難了

尤雨溪先生的這次Live可以說作為專業諮詢師來分析的

比較有意思的是，在說構建工具的時候，還影射了某個老師，哈哈。。。

聽不懂不就對了嗎？

這次"雜談"討論的都是現代前端工程實實際際的問題。沒聽懂的話你拿個小本本把聽不懂的名詞都記下來，然後挨個去搞懂啊！搞懂的過程就是你進步的過程。

再啰嗦2塊錢的:

聽不懂很大程度上是因為尤大講到的東西很多你都沒用過，甚至是沒聽說過。

大家能聽懂的原因是大家平時對前端各種好玩的東西充滿了好奇，會去不斷了解和嘗試這些新鮮玩意，了解一些很神奇的東西是怎麼做到的。

相信有這種好奇心和求知慾的你肯能能夠聽懂。

尤雨溪在live里說了一句話：

一切事物都是：先有問題，然後有思路，再然後才有了解決方法

如果你聽不太懂，也沒關係，只是因為你寫的代碼還沒複雜到需要這些東西而已，等你寫的代碼稍微複雜了一點，你會碰到一大堆問題，你去思考怎麼解決這些方法，然後你再看一遍這場live，會收貨頗多的