vue-為什麼子元件中的data選項必須是函式？
阿新 • • 發佈：2018-11-27
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../../vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 11 為什麼在Vue.component({})中使用data必須是函式？ 12 在JS中，產生一個物件是通過建構函式來產生的13 並且通過建構函式產生的物件都是新的物件 14 在例項化元件中，data每次呼叫元件都是產生一個新的元件 15 Vue.component('vue-div',{ 16 template:'#vue-div', 17 data(){ 18 return{ //這裡每次呼叫元件都會產生一個新的元件 19 message:'西門吹雪' 20 } 21 } 22 }) 23 --> 24 <div id="app"> 25 <!--新增多個，每個都是獨立的，不受其它影響--> 26 <!--驗證counter沒有被共享--> 27<!--所以data()必須以一個函式的形式返回出來--> 28 <my-btn></my-btn> 29 <my-btn></my-btn> 30 <my-btn></my-btn> 31 <my-btn></my-btn> 32 </div> 33 <!-- 1.註冊一個元件--> 34 <template id="my_btn"> 35 <button @click="counter += 1">點選的次數{{counter}}</button> 36</template> 37 38 </body> 39 <script> 40 //如果data是一個物件，那麼所有的將會被共享， 41 // 無論產生多少個元件，都是對應一樣的值 42 //這就是data必須是函式的原因 43 // let data = { 44 // counter:0 45 // }; 46 // data(){ 47 // return data; 48 // } 49 50 //2.例項化元件 51 Vue.component('my-btn',{ 52 template:'#my_btn', 53 data(){ 54 return{ 55 counter:0 //通過元件構造器產生出來的元件都是單獨的，裡面的這個counter不能共享，因為都是通過data函式來一個一個產生的， 56 } 57 } 58 }) 59 60 61 var vm = new Vue({ 62 el:'#app', 63 data:{} 64 }) 65 </script> 66 </html>