vue例項的選項總結
一、資料
API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
1. data
型別：Object | Function
限制：元件的定義只接受 function
詳細：Vue 例項的資料物件。Vue 將會遞迴將 data 的屬性轉換為 getter/setter，從而讓 data 的屬效能夠響應資料變化。物件必須是純粹的物件 (含有零個或多個的 key/value 對)。當一個元件被定義，data 必須宣告為返回一個初始資料物件的函式，因為元件可能被用來建立多個例項。如果 data 仍然是一個純粹的物件，則所有的例項將共享引用同一個資料物件！通過提供 data 函式，每次建立一個新例項後，我們能夠呼叫 data 函式，從而返回初始資料的一個全新副本資料物件。
var data = { a: 1 }
// 直接建立一個例項
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必須是函式
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
2. computed
型別：{ [key: string]: Function | { get: Function,set: Function } }
詳細：計算屬性將被混入到 Vue 例項中。所有 getter 和 setter 的 this 上下文自動地繫結為 Vue 例項。計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。注意，如果某個依賴 (比如非響應式屬性) 在該例項範疇之外，則計算屬性是不會被更新的。
var vm = new Vue({
data: { a: 1 },computed: {
// 僅讀取
aDouble: function () {
return this.a * 2
},// 讀取和設定
aPlus: {
get: function () {
return this.a + 1
},set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
3. methods
型別：{ [key: string]: Function }
詳細：methods 將被混入到 Vue 例項中。可以直接通過 VM 例項訪問這些方法，或者在指令表示式中使用。方法中的 this 自動繫結為 Vue 例項。
var vm = new Vue({
data: { a: 1 },methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
4. watch
型別：{ [key: string]: string | Function | Object | Array }
詳細：一個物件，鍵是需要觀察的表示式，值是對應回撥函式。值也可以是方法名，或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch()，遍歷 watch 物件的每一個屬性。
5. props
型別：Array<string> | Object
詳細：props 可以是陣列或物件，用於接收來自父元件的資料。props 可以是簡單的陣列，或者使用物件作為替代，物件允許配置高階選項，如型別檢測、自定義驗證和設定預設值。
你可以基於物件的語法使用以下選項：
1 type: 可以是下列原生建構函式中的一種：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義建構函式、或上述內容組成的陣列。會檢查一個 prop 是否是給定的型別，否則丟擲警告。Prop 型別的更多資訊在此。
2 default: any 為該 prop 指定一個預設值。如果該 prop 沒有被傳入，則換做用這個值。物件或陣列的預設值必須從一個工廠函式返回。
3 required: Boolean 定義該 prop 是否是必填項。在非生產環境中，如果這個值為 truthy 且該 prop 沒有被傳入的，則一個控制檯警告將會被丟擲。
4 validator: Function 自定義驗證函式會將該 prop 的值作為唯一的引數代入。在非生產環境下，如果該函式返回一個 falsy 的值 (也就是驗證失敗)，一個控制檯警告將會被丟擲。你可以在這裡查閱更多 prop 驗證的相關資訊。
二、DOM
API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-DOM
1.el
型別：string | Element
限制：只在用 new 建立例項時生效。
詳細：
(1)提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 例項。
(2)在例項掛載之後，元素可以用 vm.$el 訪問。
(3)如果在例項化時存在這個選項，例項將立即進入編譯過程，否則，需要顯式呼叫 vm.$mount() 手動開啟編譯。
提供的元素只能作為掛載點。不同於 Vue 1.x，所有的掛載元素會被 Vue 生成的 DOM 替換。因此不推薦掛載 root 例項到 <html> 或者 <body> 上。
如果 render 函式和 template property 都不存在，掛載 DOM 元素的 HTML 會被提取出來用作模板，此時，必須使用 Runtime + Compiler 構建的 Vue 庫。
2.template
型別：string
詳細：一個字串模板作為 Vue 例項的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽。
如果值以 # 開始，則它將被用作選擇符，並使用匹配元素的 innerHTML 作為模板。常用的技巧是用 <script type="x-template"> 包含模板。
出於安全考慮，你應該只使用你信任的 Vue 模板。避免使用其他人生成的內容作為你的模板。
如果 Vue 選項中包含渲染函式，該模板將被忽略。
3.render
型別：(createElement: () => VNode) => VNode
詳細：字串模板的代替方案，允許你發揮 JavaScript 最大的程式設計能力。該渲染函式接收一個 createElement 方法作為第一個引數用來建立 VNode。
如果元件是一個函式元件，渲染函式還會接收一個額外的 context 引數，為沒有例項的函式元件提供上下文資訊。
Vue 選項中的 render 函式若存在，則 Vue 建構函式不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函式。
4.renderError
2.2.0 新增
型別：(createElement: () => VNode,error: Error) => VNode
詳細：只在開發者環境下工作。
當 render 函式遭遇錯誤時，提供另外一種渲染輸出。其錯誤將會作為第二個引數傳遞到 renderError。這個功能配合 hot-reload 非常實用。
示例：
new Vue({
render (h) {
throw new Error('oops')
},renderError (h,err) {
return h('pre',{ style: { color: 'red' }},err.stack)
}
}).$mount('#app')
以上就是vue例項的選項總結的詳細內容，更多關於VUE 例項選項的資料請關注我們其它相關文章！