技術標籤：vue

一、元件可以訪問Vue例項資料嗎? (不可以)
(1).元件是一個單獨功能模組的封裝:
這個模組有屬於自己的HTML模板,也應該有屬於自己的資料data.
(2).元件中的資料是儲存在哪裡呢?頂層的Vue例項中嗎?
發現不能訪問,而且即使可以訪問,如果將所有的資料都放在Vue例項中,Vue例項就會變得非常 臃腫.
結論: Vue元件應該有自己儲存資料的地方.

二、元件自己的資料存放在哪裡呢?
(1).元件物件也有一個data屬性(也可以有methods等屬性)
(2).只是這個data屬性返回一個物件,物件內部儲存著資料
(3).而且這個函式返回一個物件,物件內部儲存著資料

 data(){
     return{

     }
  }

三、結論
根例項物件data可以是物件也可以是函式（根例項是單例），不會產生資料汙染情況
元件例項物件data必須為函式，目的是為了防止多個元件例項物件之間共用一個data，產生資料汙染。
採用函式的形式，initData時會將其作為工廠函式都會返回全新data物件

問題： 為什麼data要定義為一個函式？
(1). 元件是一個獨立的個體，那麼它應該擁有自己的資料，這個資料應該是一個獨立的資料
(2). 也就是說這個資料應該有獨立作用域，也就是有一個獨立的使用範圍，這個範圍就是這個元件內
(3). js的最大特徵是：函數語言程式設計 ， 而函式恰好提供了獨立作用域

問題： 為什麼data要有返回值？返回值還是一個物件？
(1). 因為Vue是通過observer來觀察data選項的，所有必須要有返回值
(2). 因為Vue要通過es5的Object.defineProperty屬性對物件進行getter和setter設定

注意: 不希望連鎖反應,不會讓別的值改變

  <div>
     <h2>當前計數: {{count}}</h2>
     <button @click="add">+</button>
     <button @click="edit"
 
>-</button>
  </div>
  (1). const obj={
       count:0
     }
     Vue.component('cpn',{
        template:'#cpn',
        data(){
        return obj
      },
      methods:{
         add(){
            this.count++
         },
         edit(){
            this.count--
         }
      }
     })

  (2). Vue.component('cpn',{   -- 推薦
             template:'#cpn',
             data(){
             return{
                count:0
             }
           },
           methods:{
              add(){
                 this.count++
              },
              edit(){
                 this.count--
              }
           }
          })