【技術(shù)】vue中watch跟computed使用的實(shí)例

1、watch鉤子函數(shù)監(jiān)聽數(shù)據(jù)的變化

watch 的一個(gè)特點(diǎn)是煞躬，最初綁定的時(shí)候是不會執(zhí)行的（firstName的值在data定義時(shí)賦予的值），要等到 firstName 改變時(shí)才執(zhí)行監(jiān)聽計(jì)算逸邦。

<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>

new Vue({
 el: '#root',
 data: {
   firstName: 'Dawei',
   lastName: 'Lou',
   fullName: ''
},
watch: {
   firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
   }
}
})

handler方法和immediate屬性

這時(shí)候需要增加immediate屬性恩沛，設(shè)置為true，如果不需要就設(shè)置false缕减，那就是初始化不會監(jiān)聽變化雷客，這時(shí)候需要將watch部分的代碼修改如何.

watch: {
 firstName: {
  handler(newName, oldName) {
   this.fullName = newName + ' ' + this.lastName;
  },
  // 代表在wacth里聲明了firstName這個(gè)方法之后立即先去執(zhí)行handler方法
  immediate: true
 }
}

注意：

在watch中，如果對對象進(jìn)行監(jiān)聽桥狡，只有對象obj被重新賦值時(shí)搅裙，watch才會被監(jiān)聽到，這個(gè)時(shí)候無法對obj里面的屬性的變化進(jìn)行監(jiān)聽裹芝，這時(shí)候部逮，我們可以只對這個(gè)屬性監(jiān)聽，可以是使用字符串形式監(jiān)聽

watch: {
 'obj.a': {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  // deep: true
 }
}

應(yīng)用場景：

可以只用watch來監(jiān)聽數(shù)據(jù)的變化實(shí)時(shí)更新數(shù)據(jù)的變化

<template>
 <input v-model="value" /> // 搜索框
</template>
<script>
export default {
 data(){
  return {
    value: '' // 值
  }
 },
 watch:{
   value(val){ // 實(shí)時(shí)監(jiān)聽數(shù)據(jù)變化
     this.wat_fun(val)
   }
 }嫂易， 
 methods:{
   wat_fun(val){ // 這里可以調(diào)用搜索api接口
    console.log(val)
   }
 }
}
</script>

2兄朋、computed鉤子函數(shù)監(jiān)聽數(shù)據(jù)的變化

 讀取computed里面的值還是用this.changeVal

3、watch和computed各自處理的數(shù)據(jù)關(guān)系場景不同（來源于）
知識點(diǎn)1：watch擅長處理的場景：一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
知識點(diǎn)2：computed擅長處理的場景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響

對于watch怜械，我們先從一個(gè)場景說起

在《海賊王》里面颅和，主角團(tuán)隊(duì)的名稱叫做：“草帽海賊團(tuán)”
所以我們把船員依次稱為：
草帽海賊團(tuán)索隆,草帽海賊團(tuán)娜美,以此類推。缕允。峡扩。
我們希望：當(dāng)船團(tuán)名稱發(fā)生變更的時(shí)候，這艘船上所有船員的名字一起變更Ｕ媳尽教届！
例如：
有一天，船長路飛為了加強(qiáng)團(tuán)隊(duì)建設(shè)，弘揚(yáng)海賊文化巍佑，決定“草帽海賊團(tuán)”改名為“橡膠海賊團(tuán)”（路飛是橡膠惡魔果實(shí)能力者）
我們代碼如下：

var vm = new Vue({
     el: '#app',
     /*
      data選項(xiàng)中的數(shù)據(jù)：
      1.haiZeiTuan_Name --> 海賊團(tuán)名稱
      2.船員的名稱 = 海賊團(tuán)名稱（草帽海賊團(tuán)） + 船員名稱（例如索萝钋ā）

  這些數(shù)據(jù)里存在這種關(guān)系：
  （多個(gè)）船員名稱數(shù)據(jù) --> 依賴于 --> （1個(gè))海賊團(tuán)名稱數(shù)據(jù)
  一個(gè)數(shù)據(jù)變化 ---> 多個(gè)數(shù)據(jù)全部變化
 */
 data: {
  haiZeiTuan_Name: '草帽海賊團(tuán)',
  suoLong: '草帽海賊團(tuán)索隆',
  naMei: '草帽海賊團(tuán)娜美',
  xiangJiShi: '草帽海賊團(tuán)香吉士'
 },
 /*
  在watch中，一旦haiZeiTuan_Name（海賊團(tuán)名稱）發(fā)生改變
  data選項(xiàng)中的船員名稱全部會自動(dòng)改變 （suoLong萤衰，naMei堕义，xiangJiShi）
  并把它們打印出來
 */
 watch: {
  haiZeiTuan_Name: function (newName) {
   this.suoLong = newName + '索隆'
   this.naMei = newName + '娜美'
   this.xiangJiShi = newName + '香吉士'
   console.log(this.suoLong)
   console.log(this.naMei)
   console.log(this.xiangJiShi)
  }
 }
})

// 更改watch選項(xiàng)中監(jiān)控的主數(shù)據(jù)
vm.haiZeiTuan_Name = '橡膠海賊團(tuán)'

于是船員們的稱號前綴都被統(tǒng)一修改了！(原本是“草帽海賊團(tuán)”)
但是我們的路飛船長又突發(fā)奇想：我這么喜歡吃肉脆栋，干脆我們叫做“肉肉海賊團(tuán)”好了吧倦卖！
我們把最下面的代碼改為：
// 更改watch選項(xiàng)中監(jiān)控的主數(shù)據(jù)
vm.haiZeiTuan_Name = '肉肉海賊團(tuán)'

而computed擅長處理的場景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響

我們再從一個(gè)場景說起
路飛的全名叫做：蒙奇-D-路飛，他想成為海賊王椿争，但路飛的爺爺卡普（海軍英雄）因此感到非常惱怒怕膛，于是把“路飛”改成了叫“海軍王”，希望他能改變志向
代碼如下：

var vm = new Vue({
 el: '#app',
 /*
  data選項(xiàng)中的數(shù)據(jù)：firstName秦踪，secName,thirdName
  computed監(jiān)控的數(shù)據(jù)：lufei_Name
  兩者關(guān)系： lufei_Name = firstName + secName + thirdName
  所以等式右邊三個(gè)數(shù)據(jù)任一改變褐捻，都會直接修改 lufei_Name
 */
 data: {
  // 路飛的全名：蒙奇·D·路飛
  firstName: '蒙奇',
  secName: 'D',
  thirdName: '路飛'
 },
 computed: {
  luFei_Name: function () {
   return this.firstName + this.secName + this.thirdName
  }
 }
})

// 將“路飛”改為“海軍王”
vm.thirdName = '海軍王'
// 打印路飛的全名
console.log(vm.luFei_Name)

但是：
有一天，路飛的逗逼爺爺卡普椅邓，一不小心發(fā)現(xiàn)可能把族譜搞錯(cuò)了柠逞，實(shí)際上，他們不是“D”之一族景馁，而是“H”一族板壮，也就是說，“蒙奇-D-路飛”可能要叫做“蒙奇-H-路飛”了
將最后一段代碼改為如下：
// 將“D”改為“H”
vm.secName = 'H'
// 打印路飛的全名
console.log(vm.luFei_Name)

methods不處理數(shù)據(jù)邏輯關(guān)系合住，只提供可調(diào)用的函數(shù)
相比于watch/computed绰精，methods不處理數(shù)據(jù)邏輯關(guān)系，只提供可調(diào)用的函數(shù)

new Vue({
 el: '#app',
 template: '<div id="app"><p>{{ say() }}</p></div>',
 methods: {
  say: function () {
   return '我要成為海賊王'
  }
 }
})

因此透葛，computed 在數(shù)據(jù)未發(fā)生變化時(shí)笨使，優(yōu)先讀取緩存。computed 計(jì)算屬性只有在相關(guān)的數(shù)據(jù)發(fā)生變化時(shí)才會改變要計(jì)算的屬性僚害，當(dāng)相關(guān)數(shù)據(jù)沒有變化時(shí)阱表，它會讀取緩存。而不必想 motheds方法和 watch 方法是的每次都去執(zhí)行函數(shù)贡珊。