關于vue.js組件數據流的問題

一、組件

組件，可以說是現代前端框架中必不可少的組成部分。使用組件，不僅能極大地提高代碼的復用率和開發者的開發效率，對于代碼后期的維護也有著非常重要的意義。前端開發，由于歷史遺留原因，WebComponent 雖然好用，但其發展情況卻受到極大地限制，和很多新興的前端技術一樣，可望而不可即?；谶@樣的情況，聰明的開發者們嘗試通過框架內部集成相應的功能來完成組件化，各種現代前端框架基本上都有各自的實現。這里我們來分析一下 vue 的組件，重點關注數據的流向。

二、vue 組件

vue 的組件，創建模板的時候是基于普通的 html 的，不需要學習 jsx、handlebars 等的特殊語法，所以相對來說，學習成本比較低，更容易上手。使用 vue 組件的時候，一般分為組件注冊和組件調用兩個部分。

（一）組件注冊

Vue.component('pop-box', {
 template: '<div class="component-box">\
 <div class="component-content">\
 ..........
 </div>\
 </div>',

 props: [...],

 data: function () {
 return ...;
 },

 methods: {
 ...
 },

 mounted () {
 ...
 },

 ...
});

利用 Vue.component 方法我們可以很輕松的創建一個全局可用的組件，當然也可以在實例或組件內部注冊局部組件，但原理大同小異。Vue.component 的第一個參數是組件的名字，或者說唯一標識符（id），后續調用它將通過這個名字進行調用；第二個參數是一個對象，通常它包含了模板（template）、組件內維護的數據（data、computed）、方法（methods）、鉤子函數（created 、 mounted...）等關鍵信息。

值得注意的是：

1. 組件內的 data 必須是一個函數，它的返回值將作為實際的 “data”；
2. vue1.x 和 vue2.x 的鉤子函數略有不同，如果發現鉤子函數不生效，記得確認 vue 的版本。

（二）組件調用

（1）開始標簽 + 結束標簽模式

<pop-box text="200" v-bind:number="200"></pop-box>

（2）無結束標簽模式

<pop-box text="200" v-bind:number="200" />

調用 vue 組件有以上兩種模式。兩種模式上，如果沒有使用 slot 那么實際上并沒有任何區別，但如果需要使用 slot 的時候，便只能使用同時包含開始標簽和結束標簽的模式。

值得注意的是，上面綁定數據的時候，直接采用 property="value" 的形式，不管 value 是數字還是字符串，property 最終都是字符串類型。如果想讓其變成數字類型，請使用 v-bind:property="value" 的形式，或者簡寫為 :property="value" 。

三、vue 組件數據流

vue 遵循了典型的單向數據流的原則，即數據總是由父組件傳遞到子組件，子組件在其內部可以有自己維護的數據，但它無權修改父組件傳遞給它的數據，當開發者嘗試這樣做的時候，vue 將會報錯。這樣做的好處是，防止多個子組件都嘗試修改父組件狀態時，讓這一行為變得難以追溯。vue 中具體實現方式如下：

父組件通過綁定 props 的方式，將數據傳遞給子組件，但是子組件自己并沒有權利修改這些數據，如果要修改，只能把修改這一個行為通過 event 的方式報告給父組件，由父組件本身決定改如何處理數據。

（一）簡單實例

<div id="app">
 <my-counter @inc="increase" :counter="counter"></my-counter>
</div>
...
Vue.component('my-counter', {
 template: '<div class="counter">\
 <div>{{counter}}</div>\
 <button @click="inc">increase</button>\
 </div>',

 props: ['counter'],

 methods: {
 inc: function () {
 this.$emit('inc');
 }
 }
});

var app = new Vue({
 el: '#app',
 data: {
 counter: 0
 },
 methods: {
 increase () {
 this.counter ++;
 }
 }
});

為了顯得更簡單這里只創建了一個 my-counter 組件作為子組件，我們可以姑且將 vue 的實例認為是一個父組件。

（二）分析數據流向分析

（1）我們在父組件中定義了一個數據叫 counter；
（2）調用組件的時候，通過 :counter="counter" 的方式，將父組件的 counter 以 prop 的方式傳遞到子組件中；
（3）子組件讀取到 counter，并將其展示在模板中；
（4）用戶點擊按鈕，counter 需要增加；
（5）子組件監聽到這個事件，但它并不直接修改 counter，而是通過 this.$emit('inc'); 以自定義事件的形式，將需要增加的這一個事件報告給父組件；
（6）父組件中，由于通過執行過 @inc="increase" ，能夠監聽到子組件報告過來的事件，并在自己的 increase 方法中，實現 counter 的增加；
（7）父組件里的數據更新了，子組件里的數據也將自動更新，同時也將更新界面內容，這一過程由框架自動完成。

（三）總結

上面這一個示例，基本完整展示了 vue 主要的數據流向，但是這種基于 prop/evnet 的方式僅適用于存在直接的父子關系的組件，兄弟組件或者大量組件的數據流向如果再基于這種方式將會變得非常麻煩，這時可以考慮使用更加強大的狀態管理模式。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com