Vue.js的計(jì)算屬性的作用是什么？在開發(fā)中，我們可以通過這個(gè)屬性來計(jì)算得出另外一個(gè)值，并且當(dāng)原屬性改變它也會(huì)相應(yīng)改變。下面我們就一起來看看這個(gè)計(jì)算屬性吧，希望可以幫助大家更好的學(xué)習(xí)Vue.js 。

　　通篇讀下來有兩個(gè)屬性：computed和watch 。一個(gè)方法：methods

<div id="app"><p v-once>v-once這里只會(huì)更新一次：{{message}}p><p>下面輸入會(huì)直接同步這里:{{message}}p>

v-modle:雙向更新：<input type="text" v-model="message"><p>反轉(zhuǎn)message計(jì)算屬性computed：{{reversedMessage}}p><p>使用method中定義一個(gè)函數(shù)：{{ reverseMessage() }}p>

<p>使用$watch方法fistName:<input v-model="firstName">p><p>使用$watch方法lastName:<input type="text" v-model="lastName"/><p>這里是fullName：{{fullName}}，注意觀察變化p>

<p>使用method中定義一個(gè)函數(shù)getName：{{ getName() }}p>

<p>使用computed計(jì)算getName：{{ computedName }}p>

div>

var vm = new Vue({

el:'#app',

data:{

message:'caibaojian.com',

firstName:'Baojian',

lastName:'Cai',

fullName:'Baojian Cai'

},

//計(jì)算屬性

//計(jì)算屬性是基于它的依賴緩存。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。這就意味著只要 message 沒有發(fā)生改變，多次訪問reversedMessage 計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

computed:{

reversedMessage:function(){

var msg = this.message;

var msg2 = msg;

return msg2.split('').reverse().join('');

},

computedName:function(){

return this.firstName + ' ' + this.lastName;

}

},

//方法函數(shù)，

//每當(dāng)重新渲染的時(shí)候，method 調(diào)用總會(huì)執(zhí)行函數(shù)。

methods:{

reverseMessage:function(){

return this.message.split('').reverse().join('');

},

getName:function(){

return this.firstName + ' ' + this.lastName;

}

},

//$watch方法

watch:{

//觀察fistName發(fā)生變化，fullName相應(yīng)變化

firstName:function(newVal,oldVal){

console.log('newVal:'+newVal, 'oldVal:'+oldVal);

this.fullName= newVal + ' ' + this.lastName;

},

//觀察lastName是否發(fā)生改變，fullName相應(yīng)變化

lastName:function(newVal,oldVal){

console.log('newVal:'+newVal, 'oldVal:'+oldVal);

this.fullName = this.firstName + ' ' + newVal;

}

}

})

　　另外computed還提供一個(gè)設(shè)置的方法

computed: {

fullName: {

set: function(newVal) {

var names = newVal.split(' ');

this.firstName = names[0];

this.lastName = names[names.length - 1];

}

},

}

vm.fullName = 'Jack Cai';

　　隨著fullName的改變，同時(shí)設(shè)置了其它值。

computed: {

fullName: {

set: function(newVal) {

var names = newVal.split(' ');

this.firstName = names[0];

this.lastName = names[names.length - 1];

}

},

}

vm.fullName = 'Jack Cai';

　　下面是一個(gè)比較完整的例子應(yīng)用。

<div id="watch-example">

<p>

Ask a yes/no question:

<input v-model="question">

p>

<p>{{ answer }}p>div><script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js">script><script src="https://unpkg.com/lodash@4.13.1/lodash.min.js">script><script>var watchExampleVM = new Vue({

el: '#watch-example',

data: {

question: '',

answer: 'I cannot give you an answer until you ask a question!'

},

watch: {

// 如果 question 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行

question: function (newQuestion) {

this.answer = 'Waiting for you to stop typing...'

this.getAnswer()

}

},

methods: {

// _.debounce 是一個(gè)通過 lodash 限制操作頻率的函數(shù)。

// 在這個(gè)例子中，我們希望限制訪問yesno.wtf/api的頻率

// ajax請(qǐng)求直到用戶輸入完畢才會(huì)發(fā)出

// 學(xué)習(xí)更多關(guān)于 _.debounce function (and its cousin

// _.throttle), 參考: https://lodash.com/docs#debounce

getAnswer: _.debounce(

function () {

var vm = this

if (this.question.indexOf('?') === -1) {

vm.answer = 'Questions usually contain a question mark. ;-)'

return

}

vm.answer = 'Thinking...'

axios.get('https://yesno.wtf/api')

.then(function (response) {

vm.answer = _.capitalize(response.data.answer)

})

.catch(function (error) {

vm.answer = 'Error! Could not reach the API. ' + error

})

},

// 這是我們?yōu)橛脩敉Ｖ馆斎氲却暮撩霐?shù)

500

)

}

})script>

1. 自己要注意的一些地方：放在methods屬性下面的方法調(diào)用要加()：如reserveMessage()

2. 放在computed對(duì)象下的屬性具有緩存，調(diào)用直接調(diào)用屬性：reversedMessage

3. computed還可以設(shè)置

4. watch觀并察適合監(jiān)控某些mustache的變化，并對(duì)其操作。

 

文章來源：前端開發(fā)博客