Vue 組件 data為什麽是函數
阿新 • • 發佈:2018-04-03
func 通過 log 帶來 直接 pan 註冊 構造器 屬性
在創建或註冊模板的時候,傳入一個data屬性作為用來綁定的數據。但是在組件中,data必須是一個函數,而不能直接把一個對象賦值給它。 Vue.component(‘my-component‘, { template: ‘<div>hello Vue</div>‘, data() { return {} // 返回一個唯一的對象,不要和其他組件共用一個對象進行返回!!! }, })
你在前面看到,在new Vue()的時候,是可以給data直接賦值為一個對象的。這是怎麽回事,為什麽到了組件這裏就不行了。
實際上,它首先需要創建一個組件構造器,然後註冊組件。註冊組件的本質其實就是建立一個組件構造器的引用。使用組件才是真正創建一個組件實例 。所以,註冊組件其實並不產生新的組件類,但會產生一個可以用來實例化的新方式。理解這點之後,再理解js的原型鏈:
var MyComponent = function() {} MyComponent.prototype.data = { a: 1, b: 2, } // 上面是一個虛擬的組件構造器,真實的組件構造器方法很多 var componentA = new MyComponent() var componentB = new MyComponent() // 上面實例化出來兩個組件實例,也就是通過<my-component>調用,創建的兩個實例 componentA.data.a=== componentB.data.a // true componentA.data.b = 5 componentB.data.b // 5
可以看到上面代碼中最後三句,這就比較坑爹了,如果兩個實例同時引用一個對象,那麽當你修改其中一個屬性的時候,另外一個實例也會跟著改。這怎麽可以,兩個實例應該有自己各自的域才對。所以,需要通過下面方法來進行處理:
var MyComponent = function() { this.data = this.data() } MyComponent.prototype.data = function() { return { a: 1, b:2, } }
這樣每一個實例的data屬性都是獨立的,不會相互影響了。所以,你現在知道為什麽vue組件的data必須是函數了吧。這都是因為js本身的特性帶來的,跟vue本身設計無關。
Vue 組件 data為什麽是函數