vuejs核心概念簡析

概述

使用vue編寫網頁是一個讓人愉悅的過程,它同時具有angular和react的優勢,輕量級,api簡單,文檔齊全,簡單強大,麻雀雖小五臟俱全.

快速開始vue最好的方式是閱讀官網的文檔,這是學習vue最好的途徑,沒有之一.基本上通讀文檔便可讓你從入門到精通了,下面討論一下vue的精髓與重點須要理解的部分

vue的精髓在於基於數據的狀態和組件式編程

數據驅動

基於操做dom的方式

程序=數據結構+算法

這是每一個程序都耳熟能詳的一句話,可在前端這裏並不純粹,由於前端須要跟界面打交道,html+css並沒用被抽象成某種在js中使用的數據結構,充當的更可能是界面的一種配置,jquery程序員看待他的方式就一塊塊的ui,用到的時候再$一下,獲取以後修改.整個程序寫下來是零零散散的節點操做.

一個比較實際的狀況就是,在ui控件有聯動的時候,若是沒有一種機制來管理這些ui之間的修改,那麼依賴程序員本身去手動管理這些ui的狀態,會讓人煩不勝煩,且容易出現bug.

總結一下基於操做dom的前端開發方式

拼界面->找到dom節點->修改屬性->檢測是否有其餘影響的節點->根據剛剛修改的dom節點更新本身的狀態
那麼上面的那句話就變成了

前端程序 = 拼界面+操做ui+算法

基於數據驅動的方式

vue或者angular這些mvvm框架給了前端另外一種思路,徹底基於數據驅動的編程,徹底根據數據的狀態決定ui以何種方式展現.我以爲這就是mvvm框架最大的思路上的突破,而directive或者filter或者是element directive,在jquery時代也不是什麼新鮮的東西(這並非說指令那些不重要).

讓咱們看一個例子,對比二者編程思路的不一樣

上面是常見的登陸的界面,需求以下:

1. 上面所有填寫完成格式正確,登陸按鈕才能點擊

2. 圖片驗證碼須要用戶名和輸入法都填寫完畢的狀況纔出現

使用dom的編程方式主要步驟以下

1. 獲取用戶名的input,偵聽輸入事件,在回調裏面判斷步驟4

2. 獲取密碼的input,偵聽輸入事件,在回調裏面判斷步驟4

3. 獲取驗證碼的input,偵聽輸入事件,在回調裏面判斷步驟4

4. 回調函數須要判讀用戶名和密碼是否輸入正確,若是是顯示驗證碼,再判斷驗證碼是否已經輸入
   是則獲取提交按鈕,並顯示.

5. 點擊提交按鈕的時候,獲取3個input的值,提交數據.

數據驅動的作法

1. 聲明三個變量,用戶名,密碼,驗證碼,使用數據綁定把變量綁定到三個input

2. 驗證碼的顯示狀態 = 用戶名不爲空 && 密碼不爲空

3. 提交按鈕的顯示狀態 = 用戶名不爲空 && 密碼不爲空 && 驗證碼不爲空

4. 點擊提交按鈕,提交三個變量

咱們在數據驅動的時候,並無操做dom節點,也沒有偵放任何的事件,這些框架都爲咱們作好了,框架採用一種數據綁定的方式,自動綁定dom節點的屬性.這樣就把你從操做dom節點的繁瑣過程當中解脫出來了,你只要專一於數據的狀態,ui更新的事情你不須要去管了,不過是樣式仍是內容,可見性仍是切換class,框架幫你把關注點從傳統的dom操做轉移到了數據,迴歸編程的本質:數據結果+算法.
上面的例子,最直白的表現就是,你幾乎不須要寫一行代碼了^_^,如今可能不太明顯,咱們會在後續的分享中,看到數據驅動在複雜狀態中的優異表現.

組件式編程

這個理念不是來源於vue,我第一次接觸到組件式編程的是adobe的flex,而把web組件式開發發揚光大的應該是react了,組件開發是一種樸素的開發思想,分而治之,大型系統拆分紅一個個的小模塊小組件,分配給不一樣的人.額外的好處是順便能複用這個組件。

理解組件的思想能夠類比函數。一個函數包含哪些東西呢？

1. 形參

2. 局部變量

3. 函數名

4. 返回值

那對應到vue中又是什麼呢?

函數	vue組件
形參	slot,props
局部變量和局部函數	data,methods
函數名	name
return	template

形參

這個放在第一個講，由於比其它的複雜。

props

函數能夠接受外部的輸入，然入內部吐出加工以後的結果，在vue中也是如此的，vue的組件容許從外部接收定義好的prop，能夠指定相關的數據類型，默認值，是否容許爲空，是否雙向數據同步，是否單次綁定，這就把vue組件從靜態的組件賦予了從外部接受參數，從而實現配置化的能力，舉一個例子，通常一個面板須要有可變的標題，底部多少個按鈕，是否顯示後面的蒙板層，這些均可以從外部接受參數傳入，從而達到組件的多樣化配置，大大加強了組件的靈活性。

slot

那slot呢？既然有了props，爲何還須要slot來作爲另外一種外部的輸入呢？

咱們仍是以上面的面板作爲一個例子，試想一下，有一個panel的函數以下

function panel(title,btnCount,showModel,content){

}

你們注意到了content了沒有，面板的主體內容，通常來講面板的主體內容都比較複雜，這意味着在html標籤會十分的多，那麼若是在prop裏面傳入html的模板內容，代碼的可維護性將大大的下降，並且十分不優雅，因此vue使用了slot，即所謂的插槽，來實現內容的"props"，它能夠在組件內部定義好slot的插入點，外部html插入的時候就能指定一個插入點替換掉這個slot了，我理解的slot就是針對複雜內容的一種外部參數了，那麼不復雜的內容是否是就能夠不須要了？我我的以爲是的，好比你的面板可能只須要一句話，那大可使用prop傳入便可，好比alert。可是，可是，內容的可替換性還遠遠不算是slot的惟一不一樣，這裏我想說一下slot內容的做用域的問題。

試想一下，一個面板主體的內容是一個表單，表單使用v-model綁定了一些值，那麼這些綁定的值是屬於提供主體內容組件的，仍是屬於這個面板的呢？

咱們來猜測一下:
屬於面板
若是v-model屬於面板的話，那麼你有多少的綁定，就須要在面板組件聲明多少，而這幾乎是不可能的，由於主體內容每一個面板都幾乎是不同的，這就形成了，主體內容跟面板的高度藕合，這個面板就幾乎沒有了任何的可擴展性。

屬於提供主體內容的組件
由提供主體內容的組件本身去管理本身的綁定，這就比如，面板只提供了一個運動場地，大家愛作什麼由大家本身去決定。這樣的話，slot插入點跟內容徹底解藕，你作你的事情，我只給你提供一個位置。這就是slot的精妙之處。咱們不生產內容，咱們只是內容的搬運工。

vue的文檔已經寫得很清楚了

父組件模板的內容在父組件做用域內編譯；子組件模板的內容在子組件做用域內編譯

因此在設計一個組件的時候，何時使用props，何時使用slot呢？

屬於數值驅動的用props，屬於html內容的使用slot，除非你的內容只是一句字符串。簡單明瞭。

局部變量

局部變量很好理解，對應於vue的data的而已，這跟函數裏面使用var聲明一個變量是同樣的，惟一要注意的有幾點，不要使用$和_做用變量的開頭，vue會忽略掉它。

method

方法也很好理解，就是給vue調用的方法而已，參考之前在html標籤使用的onclick=alert等等

templete

組件的html結構，這是必須的選項，畢竟組件是要顯示在界面上的.相似於函數的返回值

name

對應函數的名字，其實name屬性是可選的，就好像函數名也不是必須的，好比匿名函數，那何時會用到，函數遞歸的時候，須要有函數名，那麼組件遞歸的時候也是不可或缺的，參考樹組件。

小結

上面咱們討論了vue的一些核心的概念，我相信只要理解了vue數據驅動和組件相關的知識點，就已經掌握了vue的百分之七八十了，至於指令跟過濾器這些，都是一些比較簡單的概念，對於學過ng的人更是小菜一碟。若是能深入的把握住mvvm跟組件化的要點，不論是ng還有react，都能舉一反三，觸類旁通，而vue恰好融合了二者的優勢，精簡了其中的api，堪稱優雅，大道至簡。