Vue 中，computed 的屬性可以被視為是 data 一樣，可以讀取和設值，因此在 computed 中可以分成 getter（讀取） 和 setter（設值），一般情況下是沒有 setter 的，computed 預設只有 getter ，也就是隻能讀取，不能改變設值。

vue.js計算屬性預設只有 getter，因為是預設值所以我們也常常省略不寫，如下程式碼：

<div id="demo">{{ fullName }}</div> 
	var vm = new Vue({ 
	el: '#demo',
	data: { firstName: 'Foo', lastName: 'Bar' }, 
 	computed: { 
 		fullName: function () { 
		 	return this.firstName + ' ' + this.lastName 
		 } 
		}
	})
 

其實computed裡的程式碼完整的寫法應該是：

 computed: {
    fullName: {
      get(){
         return this.firstName + ' ' + this.lastName
      }
    }
  }

計算屬性getter的觸發時間

<template>
 	<div id="demo">
  		<p> {{ fullName }} </p> 
  		<input type="text" v-model="firstName"> 
  		<input type="text" v-model="lastName">
   </div>
</template>

 var vm = new Vue({
       el: '#demo',
       data: { firstName: 'zhang', lastName: 'san' }, 
       computed: { 
       		fullName: function () { 
       			console.log('computed getter...') 
       			return this.firstName + ' ' + this.lastName 
       			}	 
       	}, 
       updated () { 
		        console.log('updated')
        }
})

 

如果我們改變上邊程式碼裡的2個輸入框的值firstName或者lastName，都會觸發computed以及updated ()，也就是說會執行： console.log(‘computed getter…’)和console.log(‘updated’) (用來驗證是不是執行了，沒有其他意思)

需要注意的是，不是說我們更改了getter裡使用的變數，就會觸發computed的更新，前提是computed裡的值必須要在模板裡使用才行。怎麼理解呢？

如下程式碼，我們把template裡的fullName 註釋掉：

<template>
 	<div id="demo">
  		<!-- <p> {{ fullName }} </p> -->
  		<input type="text" v-model="firstName"> 
  		<input type="text" v-model="lastName">
   </div>
</template>

 var vm = new Vue({
       el: '#demo',
       data: { firstName: 'zhang', lastName: 'san' }, 
       computed: { 
       		fullName: function () { 
       			console.log('computed getter...') 
       			return this.firstName + ' ' + this.lastName 
       			}	 
       	}, 
       updated () { 
		        console.log('updated')
        }
})


 

就算我們更改了firstName以及lastName都不會觸發computed 中的 getter 中的console.log(‘computed getter…’)，而只會觸發console.log(‘updated’)

計算屬性settter

 <template>
  	<div id="demo">
   		<p> {{ fullName }} </p> 
   		<input type="text" v-model="fullName"> 
  	 	<input type="text" v-model="firstName">
    	<input type="text" v-model="lastName">
    </div> 
 </template>


      var vm = new Vue({ 
      		el: '#demo', 
      		data: { firstName: 'zhang', lastName: 'san' },
       		computed: {
        		fullName: { 
        			//getter 方法 
        			get(){
        			 console.log('computed getter...')
         			 return this.firstName + ' ' + this.lastName
          			}， 
          			//setter 方法 
          			set(newValue){ 
          				console.log('computed setter...')
           				var names = newValue.split(' ') 
          			 	this.firstName = names[0]
            			this.lastName = names[names.length - 1]
             			return this.firstName + ' ' + this.lastName
              			} 
              }
         }
         , updated () {
                	console.log('updated')
          }
 })

在template 中，我們可以看到，input 是直接綁 v-model=“fullName”，如果我們這裡直接修改了fullName的值，那麼就會觸發setter，同時也會觸發getter以及updated函式。其執行順序是setter -> getter -> updated，如下：

console.log('computed setter...')
console.log('computed getter...')
console.log('updated')

這裡需要注意的是，並不是觸發了setter也就會觸發getter，他們兩個是相互獨立的。我們這裡修改了fullName會觸發getter是因為setter函式裡有改變firstName 和 lastName 值的程式碼。也就是說我們如果註釋掉上邊的setter中修改firstName 和lastName的程式碼後就不會執行getter，如下：

set(newValue){
 console.log('computed setter...')
  // var names = newValue.split(' ') 
  // this.firstName = names[0] 
  // this.lastName = names[names.length - 1] 
  return this.firstName + ' ' + this.lastName 
  }

會執行，且順序如下

console.log('computed setter...')
console.log('updated')