computed 用來監控自己定義的變量，該變量在 data 内沒有聲明，直接在 computed 裡面定義，頁面上可直接使用。
//基礎使用
{{msg}}
<input v-model="name" />
//計算屬性
computed:{
msg:function(){
return this.name
}
}
在輸入框中，改變 name 值得時候，msg 也會跟着改變。這是因為 computed 監聽自己的屬性 msg，發現 name 一旦變動，msg 立馬會更新。
注意：msg 不可在 data 中定義，否則會報錯。
1.1、get 和 set 用法
<input v-model="full" ><br>
<input v-model="first" > <br>
<input v-model="second" >
data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:{
get(){ //回調函數 當需要讀取當前屬性值是執行，根據相關數據計算并返回當前屬性的值
return this.first ' ' this.second
},
set(val){ //監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
let names = val.split(' ')
this.first = names[0]
this.second = names[1]
}
}
}
get 方法：first 和 second 改變時，會調用 get 方法，更新 full 的值。
set 方法：修改 full 的值時，會調用 set 方法，val 是 full 的最新值。
1.2、計算屬性緩存
我們通過方法，拼接數據，也可以實現該效果，代碼如下。
<div> {{ full() }} </div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
methods:{
full(){
return this.first ' ' this.second
}
},
一個頁面内，數據有可能多次使用，我們把 computed 和 method 兩個方法放一起實現，并把這個數據在頁面内多次引用，試看以下效果。
<div>
computed計算值：
{{full}} {{full}} {{full}} {{full}}
</div>
<div>
methods計算值：
{{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:function(){
console.log('computed')
return this.first ' ' this.second
}
},
methods:{
fullt(){
console.log('方法')
return this.first ' ' this.second
}
}
運行結果為：
根據結果，我們不難發現，根據方法獲取到的數據，使用幾次就需要重新計算幾次，但計算屬性不是，而是基于它們的響應式依賴進行緩存的，之後依賴屬性值發生改變的時候，才會重新計算。由于它計算次數少，所以性能更高些。
二、watch介紹watch 是監測 Vue 實例上的數據變動，通俗地講，就是檢測 data 内聲明的數據。不僅可以監測簡單數據，還可以監測對象或對象屬性。
Demo1：監測簡單數據
<input v-model="first" > <br>
data(){
return{
first:'美女',
}
},
watch:{
first( newVal , oldVal ){
console.log('newVal',newVal) // first 的最新值
console.log('oldVal',oldVal) // first上一個值
}
},
// 修改 first的值的時候，立馬會打印最新值
Demo2：監測對象
監聽對象的時候，需要使用深度監聽。
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
per:{
handler(oldVal,newVal){
console.log('newVal',newVal)
console.log('oldVal',oldVal)
},
deep:true,
}
},
修改 per.name 的時候，發現 newVal 和 oldVal 的值是一樣的，是因為他們存儲的指針指向的是同一個地方，所以深度監聽雖然可以監聽到對象的變化，但是無法監聽到具體的是哪個屬性發生變化了。
Demo3：監聽對象的單個屬性
// 方法1：直接引用對象的屬性
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
'per.name':function(newVal,oldVal){
console.log('newVal->',newVal)
console.log('oldVal->',oldVal)
}
},
也可以借助 computed 作為中間轉換，如下：
// 方法2：借助computed
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
perName(){
console.log('name改變了')
}
},
computed:{
perName:function(){
return this.per.name
}
},
Demo4：監聽 props 組件傳過來的值
props:{
mm:String
},
//不使用 immediate
watch:{
mm(newV,oldV){
console.log('newV',newV)
console.log('oldV',oldV)
}
}
//使用 immediate
watch:{
mm:{
immediate:true,
handler(newV,oldV){
console.log('newV',newV)
console.log('oldV',oldV)
}
}
不使用 immediate 時，第一次加載頁面時，watch 監聽的 mm 中的打印并沒有執行。
使用 immediate 時，第一次加載時也會打印結果：newV 11 oldV undefined。
immediate 主要作用就是組件加載時，會立即觸發回調函數。
三、兩者區别3.1、對于 computed
computed:{
//屬性值為函數
perName:function(){
return this.per.name
},
//屬性值為屬性值
full:{
get(){ },
set(val){ }
}
},
3.2、對于 watch
immediate ：組件加載立即觸發回調函數
deep：深度監聽，主要針對複雜數據，如監聽對象時，添加深度監聽，任意的屬性值改變都會觸發。
注意：對象添加深度監聽之後，輸出的新舊值是一樣的。
computed 頁面重新渲染時，不會重複計算，而 watch 會重新計算，所以 computed 性能更高些。
四、應用場景當需要進行數值計算，并且依賴于其它數據時，應該使用 computed ，因為可以利用 computed 的緩存特性，避免每次獲取值時都要重新計算。
當需要在數據變化時執行異步操作或開銷較大的操作時，應該使用 watch，computed 不支持異步。如果需要限制執行操作的頻率，可借助 computed 作為中間狀态。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
