Vue.js计算属性

Vue.js的计算属性的作用是什么？在开发中，我们可以通过这个属性来计算得出另外一个值，并且当原属性改变它也会相应改变。下面我们就一起来看看这个计算属性吧，希望可以帮助大家更好的学习Vue.js 。

　　通篇读下来有两个属性：computed和watch 。一个方法：methods

<div id="app"><p v-once>v-once这里只会更新一次：{{message}}p><p>下面输入会直接同步这里:{{message}}p>

v-modle:双向更新：<input type="text" v-model="message"><p>反转message计算属性computed：{{reversedMessage}}p><p>使用method中定义一个函数：{{ 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中定义一个函数getName：{{ getName() }}p>

<p>使用computed计算getName：{{ computedName }}p>

div>

var vm = new Vue({

el:'#app',

data:{

message:'caibaojian.com',

firstName:'Baojian',

lastName:'Cai',

fullName:'Baojian Cai'

},

//计算属性

//计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed:{

reversedMessage:function(){

var msg = this.message;

var msg2 = msg;

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

},

computedName:function(){

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

}

},

//方法函数，

//每当重新渲染的时候，method 调用总会执行函数。

methods:{

reverseMessage:function(){

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

},

getName:function(){

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

}

},

//$watch方法

watch:{

//观察fistName发生变化，fullName相应变化

firstName:function(newVal,oldVal){

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

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

},

//观察lastName是否发生改变，fullName相应变化

lastName:function(newVal,oldVal){

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

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

}

}

})

　　另外computed还提供一个设置的方法

computed: {

fullName: {

set: function(newVal) {

var names = newVal.split(' ');

this.firstName = names[0];

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

}

},

}

vm.fullName = 'Jack Cai';

　　随着fullName的改变，同时设置了其它值。

computed: {

fullName: {

set: function(newVal) {

var names = newVal.split(' ');

this.firstName = names[0];

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

}

},

}

vm.fullName = 'Jack Cai';

　　下面是一个比较完整的例子应用。

<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 发生改变，这个函数就会运行

question: function (newQuestion) {

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

this.getAnswer()

}

},

methods: {

// _.debounce 是一个通过 lodash 限制操作频率的函数。

// 在这个例子中，我们希望限制访问yesno.wtf/api的频率

// ajax请求直到用户输入完毕才会发出

// 学习更多关于 _.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

})

},

// 这是我们为用户停止输入等待的毫秒数

500

)

}

})script>

1. 自己要注意的一些地方：放在methods属性下面的方法调用要加()：如reserveMessage()

2. 放在computed对象下的属性具有缓存，调用直接调用属性：reversedMessage

3. computed还可以设置

4. watch观并察适合监控某些mustache的变化，并对其操作。

 

文章来源：前端开发博客