1信柿、vue父子組件之間的通信
在vue組件通信中其中最常見通信方式就是父子組件之中的通性，而父子組件的設定方式在不同情況下又各有不同怎虫。最常見的就是父組件為控制組件子組件為視圖組件朗兵。父組件傳遞數據給子組件使用，遇到業(yè)務邏輯操作時子組件觸發(fā)父組件的自定義事件嫉晶。無論哪種組織方式父子組件的通信方式都是大同小異。
父組件到子組件通訊
父組件到子組件的通訊主要為：子組件接受使用父組件的數據焦影，這里的數據包括屬性和方法（String,Number,Boolean,Object, Array ,Function）车遂。vue提倡單項數據流，因此在通常情況下都是父組件傳遞數據給子組件使用斯辰，子組件觸發(fā)父組件的事件舶担，并傳遞給父組件所需要的參數。
通過props傳遞數據
父子通訊中最常見的數據傳遞方式就是通過props傳遞數據彬呻，就好像方法的傳參一樣衣陶，父組件調用子組件并傳入數據，子組件接受到父組件傳遞的數據進行驗證使用闸氮。
props可以接受function,所以function也可以以這種方式傳遞到子組件使用剪况。
通過$on傳遞父組件方法
通過$on傳遞父組件方法是組件通信中常用的方法傳遞方式。它可以與通過props傳遞方法達到相同的效果蒲跨。相比于props傳遞function,它更加的直觀和顯示的表現出了調用關系译断。
獲取父組件然后使用父組件中的數據（不推薦）
準確來說這種方式并不屬于數據的傳遞而是一種主動的查找。父組件并沒有主動的傳遞數據給子組件或悲，而是子組件通過與父組件的關聯關系孙咪，獲取了父組件的數據。
該方法雖然能實現獲取父組件中的數據但是不推薦這種方式巡语，因為vue提倡單向數據流翎蹈，只有父組件交給子組件的數據子組件才有使用的權限，不允許子組件私自獲取父組件的數據進行使用男公。在父與子的關系中子應當是處于一種被動關系荤堪。
此處的this為子組件實例
子組件到父組件通訊
子組件到父組件的通訊主要為父組件如何接受子組件之中的數據。這里的數據包括屬性和方法（String,Number,Boolean,Object, Array ,Function）枢赔。
通過$emit傳遞父組件數據
與父組件到子組件通訊中的$on配套使用澄阳，可以向父組件中觸發(fā)的方法傳遞參數供父組件使用。
refs獲取
可以通過在子組件添加ref屬性踏拜，然后可以通過ref屬性名稱獲取到子組件的實例碎赢。準確來說這種方式和this.$parent一樣并不屬于數據的傳遞而是一種主動的查找。
盡量避免使用這種方式执隧。因為在父子組件通信的過程中。父組件是處于高位是擁有控制權，而子組件在多數情況下應該為純視圖組件镀琉，只負責視圖的展示和自身視圖的邏輯操作峦嗤。對外交互的權利應該由父組件來控制。所以應當由父組件傳遞視圖數據給子組件屋摔，子組件負責展示烁设。而子組件的對外交互通過$emit觸發(fā)父組件中相應的方法，再由父組件處理相應邏輯钓试。
父組件
importChildOnefrom'./ChildOne';exportdefault{components: {? ? ? ChildOne,? ? },? ? mounted(){console.log(this.$refs['child']);? ? },? };
2装黑、計算屬性與方法屬性的區(qū)別
在模板中綁定表達式是非常便利的，但是它們實際上只用于簡單的操作弓熏。在模板中放入太多的邏輯會讓模板過重且難以維護恋谭。例如：
在這種情況下，模板不再簡單和清晰挽鞠。在實現反向顯示?message?之前疚颊，你應該確認它。這個問題在你不止一次反向顯示 message 的時候變得更加糟糕信认。
這就是為什么任何復雜邏輯材义，你都應當使用計算屬性。
結果：
Original message: "Hello"
Computed reversed message: "olleH"
這里我們聲明了一個計算屬性?reversedMessage?嫁赏。我們提供的函數將用作屬性?vm.reversedMessage?的 getter 其掂。
你可以打開瀏覽器的控制臺，修改 vm 潦蝇。?vm.reversedMessage?的值始終取決于?vm.message?的值款熬。
你可以像綁定普通屬性一樣在模板中綁定計算屬性。 Vue 知道?vm.reversedMessage?依賴于?vm.message?护蝶，因此當?vm.message?發(fā)生改變時华烟，依賴于?vm.reversedMessage?的綁定也會更新。而且最妙的是我們是聲明式地創(chuàng)建這種依賴關系：計算屬性的 getter 是干凈無副作用的持灰，因此也是易于測試和理解的盔夜。
你可能已經注意到我們可以通過調用表達式中的method來達到同樣的效果：
不經過計算屬性，我們可以在 method 中定義一個相同的函數來替代它堤魁。對于最終的結果喂链，兩種方式確實是相同的。然而妥泉，不同的是計算屬性是基于它的依賴緩存椭微。計算屬性只有在它的相關依賴發(fā)生改變時才會重新取值。這就意味著只要?message?沒有發(fā)生改變盲链，多次訪問?reversedMessage?計算屬性會立即返回之前的計算結果蝇率，而不必再次執(zhí)行函數迟杂。
這也同樣意味著如下計算屬性將不會更新，因為?Date.now()?不是響應式依賴：
相比而言本慕，每當重新渲染的時候排拷，method 調用總會執(zhí)行函數。
我們?yōu)槭裁葱枰彺婀荆考僭O我們有一個重要的計算屬性?A?监氢，這個計算屬性需要一個巨大的數組遍歷和做大量的計算。然后我們可能有其他的計算屬性依賴于?A?藤违。如果沒有緩存浪腐，我們將不可避免的多次執(zhí)行?A?的 getter ！如果你不希望有緩存顿乒，請用 method 替代议街。
Vue.js 提供了一個方法?$watch?，它用于觀察 Vue 實例上的數據變動淆游。當一些數據需要根據其它數據變化時傍睹，?$watch?很誘人 —— 特別是如果你來自 AngularJS 。不過犹菱，通常更好的辦法是使用計算屬性而不是一個命令式的?$watch?回調拾稳。思考下面例子：
上面代碼是命令式的和重復的。跟計算屬性對比：
這樣更好腊脱，不是嗎访得？
3、詳解Vue雙向數據綁定原理解析
基本原理
Vue.采用數據劫持結合發(fā)布者-訂閱者模式的方式陕凹，通過Object.defineProperty()來劫持各個屬性的setter和getter悍抑，數據變動時發(fā)布消息給訂閱者，觸發(fā)相應函數的回調杜耙。
思路整理
要實現mvvm的雙向綁定搜骡，需要實現如下幾點：
1.實現一個數據監(jiān)聽器Observer，能夠對對象的所有屬性進行監(jiān)聽佑女，發(fā)生變化時拿到最新值通知訂閱者
2.實現一個解析器Compile记靡，對每個子元素節(jié)點的指令進行掃描和解析，根據模板指令替換數據团驱，初始化視圖以及綁定相應的回調函數摸吠；
3.實現一個Watcher，作為Observer和Compile的橋梁嚎花，能夠訂閱屬性變動的通知寸痢，執(zhí)行指令綁定的回調函數，更新視圖
4.mvvm的入口紊选，整合以上三者
小結
雙向綁定的原理很簡單啼止，通過數據劫持道逗，當設置新屬性值的時候通過訂閱者更新視圖；編譯指令献烦，替換變量憔辫，同時綁定更新函數到訂閱者；對應事件綁定調用addEventListener進行監(jiān)聽仿荆。
以上就是本文的全部內容，希望對大家的學習有所幫助坏平，也希望大家多多支持腳本之家拢操。
4、詳解Vue的生命周期
每個 Vue 實例在被創(chuàng)建之前都要經過一系列的初始化過程舶替。例如令境，實例需要配置數據觀測(data observer)、編譯模版顾瞪、掛載實例到 DOM 舔庶，然后在數據變化時更新 DOM 。下圖展示的就是一個vue實例對象的生命周期陈醒。
我們可以看到惕橙，vue對象初始化過程中，會執(zhí)行到beforeCreate,created,beforeMount,mounted?這幾個鉤子的內容
beforeCreate?：數據還沒有監(jiān)聽钉跷，沒有綁定到vue對象實例弥鹦，同時也沒有掛載對象
created?：數據已經綁定到了對象實例，但是還沒有掛載對象
beforeMount: 模板已經編譯好了爷辙，根據數據和模板已經生成了對應的元素對象彬坏，將數據對象關聯到了對象的 $el屬性，$el屬性是一個HTMLElement對象膝晾，也就是這個階段栓始，vue實例通過原生的createElement等方法來創(chuàng)建這個html片段，準備注入到我們vue實例指明的el屬性所對應的掛載點
mounted:將$el的內容掛載到了el血当，相當于我們在jquery執(zhí)行了$(el).html($el),生成頁面上真正的dom幻赚，上面我們就會發(fā)現dom的元素和我們$el的元素是一致的。在此之后歹颓，我們能夠用方法來獲取到el元素下的dom對象坯屿，并進 行各種操作
當我們的data發(fā)生改變時，會調用beforeUpdate和updated方法
beforeUpdate?：數據更新到dom之前巍扛，我們可以看到$el對象已經修改领跛，但是我們頁面上dom的數據還沒有發(fā)生改變
updated: dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的最小路徑撤奸，將改變更新到dom上面吠昭，完成更新
beforeDestroy,destroed?:實例的銷毀喊括，vue實例還是存在的，只是解綁了事件的監(jiān)聽還有watcher對象數據與view的綁定矢棚，即數據驅動
