創建Vue實例時，使用 new Vue ({//配置項}) 或者 組件定義中 export default {//配置項}，所有的Vue組件都是Vue實例，並且接受相同的選項對象（一些根實例特有的選項除外）

如：

new Vue({
//選項配置

  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
})

配置項一共可以分為六大類：數據、DOM、生命周期鉤子、資源、組合、其他

一、數據

（1）data：Vue根實例或者當前組件上的數據對象，類型可能是純粹的object形式，但當為組件上的數據時，必須是function類型

當是Vue根實例上時：

new Vue ({
    data: {
        num: 3
    }
})

當是組件上的數據時：

export default {
    data: function () {
        return {
            num: 3
        }
    }
}

（2）computed：計算屬性，根據data中的數據需要動態計算的屬性。在new根實例和組件中使用的方法和含義都一樣，不一一舉例（以下所有配置不提名都代表一樣）

new Vue({
   data:  {
    a: 1
    } ,
    computed: {
        dbA: 
 
function(){
            return this.a * 2;
        }
    }
})

如上例中，計算屬性dbA是由data數據中的屬性得到，使用時和數據屬性a是一樣的，沒有差距

（3）watch：偵聽器，監視data中屬性的變化，來做出反應

new Vue({
   data:  {
    a: 1,
    dbA:2
    },
    watch: {
        a: function(val,oldVal){//監聽a的變化，val為變化後的值，oldVal為變化之前的值
            this.dbA = val *2
        }
    }
})
 

和計算屬性進行對比可以發現，當有一些數據需要隨著其他數據變化而變化時，計算屬性和偵聽器有時均可以實現，要優選計算屬性，避免偵聽器的濫用！但是當需要在數據變化時執行異步操作或者開銷較大的操作時，要是用偵聽器

（4）methods：方法的集合，用到的所有方法，定義在其中

new Vue({
   data:  {
    a: 1
    } ,
    methods: {
        clickBtn: function(){ 
             this.a++;
        }
    }
})

(5)props:接受從父組件傳過來的數據

在父組件中，使用子組件時：<child v-bind:data1="data1"></child>，通過v-bind把子組件中所需要的數據傳遞給子組件，在子組件中通過props來接受

子組件中props的格式一般為為：props:[‘data1‘,‘data2‘,....]或者是 props:{data1:data1Type,data2:data2Type,...}

export default {
  data () {
    return {
      show: true
    }
  },
  props: {
    lists: Array
  }
}

（6）porpsData：只能用在new創建的根實例中，主要作用是方便測試

二：DOM

（1）el：只有在new創建的根實例中才有，提供一個在頁面上已存在的DOM元素作為Vue實例的掛載目標，可以是一個CSS選擇器也可以是一個HTMLElement實例，一般選用CSS選擇器中的id來標識

（2）template：一個字符串模板作為Vue實例的標識使用

new Vue({
  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
})

（3）render：字符串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。該渲染函數接收一個 createElement 方法作為第一個參數用來創建 VNode。

Vue 選項中的 render 函數若存在，則 Vue 構造函數不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數。

（4）renderError：當render函數遭遇錯誤時，提供的另外一種渲染輸出

三：生命周期鉤子

生命周期鉤子即生命周期回調函數,常用的分為以下三種：

（1）初始化階段（執行一次）：

• beforeCreate(){}，
• created(){},
• beforeMount(){},
• mounted(){},//初始化完成後觸發，一般在該回調函數中發送ajax請求或者啟動定時器等異步任務

（2）更新階段（執行0~n次）：

• beforeUpdated(){},
• updated(){}

（3）死亡階段（執行1次）：

• beforeDestroy(){},//做收尾工作，如：清除定時器
• destroyed(){}

四：資源

（1）components：註冊vue實例中可用的組件，是object類型

<template>
  <div class="container">
    <!--使用組件-->
    <vue-header/>
    <Menu/>
  </div>

</template>

<script>
//引入組件
import VueHeader from ‘./components/Header‘
import Menu from ‘./components/Menu‘
export default{
  components: { //註冊組件
    VueHeader,
    Menu
  }
}
</script>

（2）directives：註冊（自定義）局部指令，自定義的指令只有在當前vue實例中有效

語法：directives:{"diretiveName":function(){}}

（3）filters:定義本地過濾器

filters: {
  capitalize: function (value) {
    if (!value) return ‘‘
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
//除了上面在一個組件的選項中定義本地的過濾器，也可在在創建 Vue 實例之前全局定義過濾器
Vue.filter(‘capitalize‘, function (value) {
  if (!value) return ‘‘
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

Vue實例 中的常用配置項