Vue中有兩個(gè)非常重要的生命周期函數(shù)，一個(gè)是mounted，另一個(gè)是computed。這兩個(gè)函數(shù)都經(jīng)常被使用在Vue項(xiàng)目中，對(duì)于前端開發(fā)者來說，掌握它們的使用方法和作用非常重要。

首先來看一下computed函數(shù)。這個(gè)函數(shù)主要用于計(jì)算屬性，比如我們需要根據(jù)一些數(shù)據(jù)的復(fù)雜計(jì)算結(jié)果來渲染頁面，這時(shí)候computed就派上用場(chǎng)了。其使用方法如下：

<!--模板代碼-->
<div>{{reversedMessage}}</div>
<!--JS代碼-->
data() {
return {
message: 'Hello Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}

上面這段代碼的效果是將message變量中的值翻轉(zhuǎn)，并渲染到頁面中。computed函數(shù)的本質(zhì)是一個(gè)函數(shù)，但是卻可以像變量一樣被使用。它的值在數(shù)據(jù)發(fā)生變化時(shí)才重新計(jì)算，一定程度上減輕了頁面重復(fù)渲染的壓力。

接下來看一下mounted函數(shù)。這個(gè)函數(shù)則用于掛載組件。一般用于API請(qǐng)求返回?cái)?shù)據(jù)之后，將數(shù)據(jù)掛載到組件上進(jìn)行渲染。其使用方法如下：

<!--模板代碼-->
<div>{{message}}</div>
<!--JS代碼-->
data() {
return {
message: ''
}
},
mounted() {
axios.get('http://zhihu.com/api/message').then(res =>{
this.message = res.data.message
})
}

上面這段代碼的效果是用axios請(qǐng)求獲取數(shù)據(jù)，然后將返回的數(shù)據(jù)渲染到頁面上。mounted函數(shù)的本質(zhì)是一個(gè)鉤子函數(shù)，Vue在組件被掛載到頁面上后，會(huì)自動(dòng)調(diào)用它。我們可以在這個(gè)函數(shù)中進(jìn)行一些初始化操作，比如數(shù)據(jù)請(qǐng)求等。