選項對象 · FA+Ecloud互聯網應用開發平臺綜合技術入門指南(READ)

## 一、概述 Vue初始化的選項對象，包括數據類、DOM類、生命周期鉤子類、資源類、組合類及其他類；可以用于new Vue（）、Vue.component...、 >[danger] > 1、除了官方確定的這些選項對象之外，還可以通過混入的方式，添加新的組件選項對象；詳情參考：[https://cn.vuejs.org/v2/guide/mixins.html](https://cn.vuejs.org/v2/guide/mixins.html)； > 2、除選項對象外，vue實例還可以傳入自定義 property，通過vm.$options獲取； > ![](https://img.kancloud.cn/53/30/53300f6da55eed29e69de7854132081a_662x176.png) ## 二、數據類 1、data 參考：[https://cn.vuejs.org/v2/api/#data](https://cn.vuejs.org/v2/api/#data) 組件實例化的時候，data是一個實例對象。但是定義組件的時候， data 必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！通過提供 data 函數，每次創建一個新實例后，我們能夠調用 data 函數，從而返回初始數據的一個全新副本數據對象。實例化： ![](https://img.kancloud.cn/43/43/434375774819689e23b16eb566b2c96e_675x244.png) 定義組件方式1： ![](https://img.kancloud.cn/ba/fd/bafd41067bc0fb444492cfd0b69ba8de_675x174.png) 定義組件方式2： ![](https://img.kancloud.cn/3f/c3/3fc35a75a5bf4163b7105e10299dceba_457x298.png) 2、props 參考：[https://cn.vuejs.org/v2/api/#props](https://cn.vuejs.org/v2/api/#props) 3、propsData 參考：[https://cn.vuejs.org/v2/api/#propsData](https://cn.vuejs.org/v2/api/#propsData) 4、computed 參考：[https://cn.vuejs.org/v2/api/#computed](https://cn.vuejs.org/v2/api/#computed) 里面是定義的函數，當引用的屬性發生變化的時候，會自動觸發所有引用的地方更新數據，與methods不同的在于： >[danger] computed是**屬性調用**，而methods是**函數調用**； > computed帶有**緩存功能**，而methods不是； > 5、methods 參考：[https://cn.vuejs.org/v2/api/#methods](https://cn.vuejs.org/v2/api/#methods) methods中定義的函數將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 `this` 自動綁定為 Vue 實例。 6、watch 參考：[https://cn.vuejs.org/v2/api/#watch](https://cn.vuejs.org/v2/api/#watch) ## 三、DOM類 1、el 參考：[https://cn.vuejs.org/v2/api/#el](https://cn.vuejs.org/v2/api/#el) 2、template 參考：[https://cn.vuejs.org/v2/api/#template](https://cn.vuejs.org/v2/api/#template) 3、render 參考：[https://cn.vuejs.org/v2/api/#render](https://cn.vuejs.org/v2/api/#render) 4、renderError 參考：[https://cn.vuejs.org/v2/api/#renderError](https://cn.vuejs.org/v2/api/#renderError) ## 四、生命周期類 1、beforeCreate 2、created 3、beforeMount 4、mounted 5、beforeUpdate 6、updated 7、activated 8、deactivated 9、beforeDestroy 10、destroyed 11、errorCaptured 參考：[https://cn.vuejs.org/v2/api/#選項-生命周期鉤子](https://cn.vuejs.org/v2/api/#選項-生命周期鉤子) ## 五、資源類 1、directives 2、filters 3、components 參考：[https://cn.vuejs.org/v2/api/#選項-資源](https://cn.vuejs.org/v2/api/#選項-資源) 局部注冊組件，注冊后只能在當頁調用；這里申明當前頁面組件可用的第三方組件； ## 六、組合 1、parent 2、mixins 3、extends 4、provide-inject [https://cn.vuejs.org/v2/api/#選項-組合](https://cn.vuejs.org/v2/api/#選項-組合) ## 七、其他類 1、name 2、delimiters 3、functional 4、model 5、inheritAttrs 6、comments [https://cn.vuejs.org/v2/api/#選項-其它](https://cn.vuejs.org/v2/api/#選項-其它)