Vue的實例是Vue框架的入口,其實也就是前端的ViewModel,它包含了頁面中的業務邏輯處理、數據模型等,當然它也有自己的一系列的生命週期的事件鉤子,輔助我們進行對整個Vue實例生成、編譯、掛着、銷燬等過程進行js控制。
1. Vue實例初始化的選項配置對象詳解
前面我們已經用了很多次 new Vue({…})的代碼,而且Vue初始化的選項都已經用了data、methods、el、computedd等,估計您看到這裏時,應該已經都明白了他們的作用,我們就詳細講解一下他們的使用情況。更詳細的請參考官網內容
1.1. Vue實例的的data對象
- 介紹
Vue的實例的數據對象data 我們已經用了很多了,數據綁定離不開data裏面的數據。也是Vue的核心屬性。 它是Vue綁定數據到HTML標籤的數據源泉,另外Vue框架會自動監視data裏面的數據變化,自動更新數據到HTML標簽上去。本質原理是:Vue會自動將data裏面的數據進行遞歸抓換成getter和setter,然後就可以自動更新HTML標籤了,當然用getter和setter所以老的瀏覽器Vue支持的不夠好。
- data對象的類型:
類型是Object或者Function。
如果是組件對象中,data必須是Function類型。【後面學了組件後就明白了,暫時對組件先放放。】
實例:
// 創建普通的Vue實例
var vm = new Vue({
data: data
})
// 組件定義【後面會詳細講的】
// Vue.extend() 中 data 必須是函數
var Component = Vue.extend({
data: function () { //這裏必須是函數!!!!
return { a: 1 }
}
})
1.2. Vue實例的computed
- 介紹
Vue的計算屬性(computed)的屬性會自動混入Vue的實例中。所有 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例。這就很強大了,再計算屬性中定義的函數裏面可以直接使用指向了vue實例的this,異常方便的啊。
- 類型
{ 鍵:函數}{ [key: string]: Function | { get: Function, set: Function } }
當然,可以省略setter,如果省略了setter,那麼值就可以是普通函數,但是必須有返回值。
- 官方的實例
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
1.3. methods
-
類型:
{ [key: string]: Function }
-
詳細:
methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法,或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue 實例。
注意,不應該使用箭頭函數來定義 method 函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級作用域的上下文,所以 this 將不會按照期望指向 Vue 實例,this.a 將是 undefined。
- 示例:
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
1.4. watch
- 類型
{ [key: string]: string | Function | Object }
- 詳細:
一個對象,鍵是需要觀察的表達式,值是對應回調函數。值也可以是方法名,或者包含選項的對象。Vue 實例將會在實例化時調用 $watch(),遍歷 watch 對象的每一個屬性。
- 示例:
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
// 監控a變量變化的時候,自動執行此函數
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
//注意,不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級作用域的上下文,所以 this 將不會按照期望指向 Vue 實例,this.updateAutocomplete 將是 undefined。
- 參考綜合案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之數據監控</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件響應方法的邏輯代碼
getNumber: function (e) {
this.number += 1; // 不管是內聯方法調用,還是綁定事件處理器兩種方式執行事件響應方法的時候 this都是指向 app
}
},
watch: {
// 監控number的變化,並自動執行下面的函數
number: function (val, oldVal) {
console.log('val:' + val + ' - oldVal: ' + oldVal);
}
}
});
</script>
</body>
</html>
1.5. 設置el的詳解
- 類型
string | HTMLElement
限制: 只在由 new 創建的實例中遵守。
- 詳細:
提供一個在頁面上已存在的 DOM 元素作爲 Vue 實例的掛載目標,也就是說Vue綁定數據到哪裏去找。可以是CSS 選擇器,也可以是一個 HTMLElement實例。
在實例掛載之後(生命週期的內容後面會詳細講的奧), 元素可以用 vm.$el 訪問。
如果這個選項在實例化時有作用,實例將立即進入編譯過程,否則,需要顯式調用 vm.$mount() 手動開啓編譯。
// 幾乎所有例子都用到這個,所以就不再贅述
var app = new Vue({
el: '#app',
...
});
2. Vue實例的生命週期
Vue實例有一個完整的生命週期,也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,我們稱這是Vue的生命週期。通俗說就是Vue實例從創建到銷燬的過程,就是生命週期。
在Vue的整個生命週期中,它提供了一系列的事件,可以讓我們註冊js方法,可以讓我們達到控制整個過程的目的地,哇賽,如果你搞過Asp.Net WebForm的話,你會發現整個就是WebForm的翻版嘛哈哈。值得注意的是,在這些事件響應方法中的this直接指向的是vue的實例。
首先看看下面官網的一張生命週期的圖,我做一下標註,看看整體的流程,後面我們上代碼做一下效果。
Vue提供的可以註冊的鉤子都在上圖片的紅色框標註。 他們是:
- beforeCreate
在實例初始化之後,數據觀測(data observer) 和 event/watcher 事件配置之前被調用。
- created
實例已經創建完成之後被調用。在這一步,實例已完成以下的配置:數據觀測(data observer),屬性和方法的運算, watch/event 事件回調。然而,掛載階段還沒開始,$el 屬性目前不可見。
- beforeMount
在掛載開始之前被調用:相關的 render 函數首次被調用。
- mounted
el 被新創建的 vm.el 也在文檔內。
- beforeUpdate
數據更新時調用,發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態,這不會觸發附加的重渲染過程。
- updated
由於數據更改導致的虛擬 DOM 重新渲染和打補丁,在這之後會調用該鉤子。
當這個鉤子被調用時,組件 DOM 已經更新,所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下,你應該避免在此期間更改狀態,因爲這可能會導致更新無限循環。
該鉤子在服務器端渲染期間不被調用。
- beforeDestroy
實例銷燬之前調用。在這一步,實例仍然完全可用。
- destroyed
Vue 實例銷燬後調用。調用後,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。
接下來我們做一個例子,看一下Vue中所有的生命週期怎麼用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之生命週期</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="text" name="btnSetNumber" v-model="number">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
beforeCreate: function () {
console.log('beforeCreate 鉤子執行...');
console.log(this.number)
},
cteated: function () {
console.log('cteated 鉤子執行...');
console.log(this.number)
},
beforeMount: function () {
console.log('beforeMount 鉤子執行...');
console.log(this.number)
},
mounted: function () {
console.log('mounted 鉤子執行...');
console.log(this.number)
},
beforeUpdate: function () {
console.log('beforeUpdate 鉤子執行...');
console.log(this.number)
},
updated: function () {
console.log('updated 鉤子執行...');
console.log(this.number)
},
beforeDestroy: function () {
console.log('beforeDestroy 鉤子執行...');
console.log(this.number)
},
destroyed: function () {
console.log('destroyed 鉤子執行...');
console.log(this.number)
},
});
</script>
</body>
</html>
再看一個綜合的實戰的例子,可能涉及到ajax和組件,不過先看一下vue的生命週期的例子的用法:
import Axios from 'axios' // 這是一個輕量級的ajax庫,import是es6模塊導入的語法。
export default { // 這是一個vue的模塊,後面講奧。
name: 'app',
components: {
},
data: function () {
return {
list: []
}
},
mounted: function () { // 掛在完成後的生命週期鉤子註冊。
this.$nextTick(function () { // 等待下一次更新完成後執行業務處理代碼。
Axios.get('/api/menulist', {// 將回調延遲到下次 DOM 更新循環之後執行。在修改數據之後立即使用它,然後等待 DOM 更新
params: {
}
}).then(function (res) {
this.list = res.data
}.bind(this))
})
}
}
3. Vue實例的全局配置
這一塊都是一些小的知識點,我就不贅述了,直接copy 官網 Vue.config 是一個對象,包含 Vue 的全局配置。可以在啓動應用之前修改下列屬性:
-
silent
-
類型: boolean
-
默認值: false
-
用法:
-
Vue.config.silent = true
//取消 Vue 所有的日誌與警告。
-
optionMergeStrategies
-
類型: { [key: string]: Function }
-
默認值: {}
-
用法:
-
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
})
// Profile.options._my_option = 2
//自定義合併策略的選項。
//合併策略選項分別接受第一個參數作爲父實例,第二個參數爲子實例,Vue實例上下文被作爲第三個參數傳入。
-
devtools
-
類型: boolean
-
默認值: true (生產版爲 false)
-
用法:
// 務必在加載 Vue 之後,立即同步設置以下內容
Vue.config.devtools = true
//配置是否允許 vue-devtools 檢查代碼。開發版本默認爲 true,生產版本默認爲 false。生產版本設爲 true 可以啓用檢查。 -
-
errorHandler
-
類型: Function
-
默認值: 默認拋出錯誤
-
用法:
-
Vue.config.errorHandler = function (err, vm) {
// handle error
}
//指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時,可獲取錯誤信息和 Vue 實例。
//Sentry, an error tracking service, provides official integration using this option.
-
ignoredElements
-
類型: Array
-
默認值: []
-
用法:
Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component' ]
須使 Vue 忽略在 Vue 之外的自定義元素 (e.g., 使用了 Web Components APIs)。否則,它會假設你忘記註冊全局組件或者拼錯了組件名稱,從而拋出一個關於 Unknown custom element 的警告。
-
-
keyCodes
-
類型: { [key: string]: number | Array }
-
默認值: {}
-
用法:
-
Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}api
//給 v-on 自定義鍵位別名。
4. Vue的全局API
Vue的全局API提供大量的功能,我這裏就給大家羅列幾個常用的結果,其他的還是參考官網.
4.1. Vue.nextTick
-
語法: Vue.nextTick( [callback, context] )
-
參數:
{Function} [callback]
{Object} [context] -
用法: 在下次 DOM 更新循環結束之後執行延遲迴調。在修改數據之後立即使用這個方法,獲取更新後的 DOM。
// 修改數據
vm.msg = ‘Hello’
// DOM 還沒有更新
Vue.nextTick(function () {
// DOM 更新了
})
4.2. Vue.set
-
語法: Vue.set( object, key, value )
-
參數:
{Object} object
{string} key
{any} value
返回值: 設置的值. -
用法:
設置對象的屬性。如果對象是響應式的,確保屬性被創建後也是響應式的,同時觸發視圖更新。這個方法主要用於避開 Vue 不能檢測屬性被添加的限制。 注意對象不能是 Vue 實例,或者 Vue 實例的根數據對象。
4.3. Vue.compile
- 語法:
`Vue.compile( template )`
- 參數:
{string} template
- 用法:
//在render函數中編譯模板字符串。只在獨立構建時有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
4.4. 全局API總結
其實還有幾個其他的全局API,不打算在這裏講了,比如擴展組件Vue.extend 的用法、Vue.use加載插件、Vue.filter加載過濾器、Vue.directive自定義指令等 後面再講其他Vue的知識點的時候,再加上這些,全局API其實就是Vue類型的靜態方法,全局範圍內都可以使用的,某些實例的方法本質也是調用了這些全局的,後面用到時候再說。
4.5. Vue實例與生命週期總結
Vue的實例封裝的還是挺有藝術性的,很符合開發者的思維規範,它的生命週期也非常清晰,使用起來也非常方便。Vue確實一個好框架。
其他章節詳情請參考:http://aicoder.com/vue/preview/all.html
Github地址:源碼下載