VUE子組件的watch不被觸發(fā)問(wèn)題及解決

更新時(shí)間：2023年10月13日 14:57:48 作者：海到無(wú)邊天作岸山登絕頂我為峰

這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

VUE子組件的watch不觸發(fā)

1.起因

在父組件引入子組件，子組件引入dialog是一個(gè)彈框。

a. prop:['flag']
b.子組件是一個(gè)dialog彈框。
c. 現(xiàn)在的效果是：刷新頁(yè)面，第一次的彈框出現(xiàn)，將彈框關(guān)閉之后，再次點(diǎn)擊，彈框不出現(xiàn)。每次傳遞給子組件的flag值是一樣，此時(shí)就不會(huì)觸發(fā)子組件里面的 watch：{ flag: 'changeFlag' }
指定的changeFlag方法。

2.解決方法

a.父組件初始化一個(gè)字段：openDetailDialog: false
b.通過(guò)以下方式傳遞給子組件

open-detail-dialog="openDetailDialog"

在這里插入圖片描述

c.子組件接收。從而觸發(fā)方法

在這里插入圖片描述

d. 關(guān)閉子組件彈框時(shí)需要注意：

在這里插入圖片描述

e.通過(guò)$emit給父組件通知一個(gè)事件，父組件接收事件并作出處理，在處理的方法里面對(duì)this.openDetailDialog的值取反

在這里插入圖片描述

3.思路

Watch對(duì)應(yīng)的監(jiān)聽(tīng)方法不被觸發(fā)，因?yàn)閣atch監(jiān)聽(tīng)的key對(duì)應(yīng)的值沒(méi)有發(fā)生變化，所以加一個(gè)臨時(shí)的變量，然后通過(guò)對(duì)其取反，來(lái)保證每一次watch監(jiān)聽(tīng)的值與上一次不同，從而是watch事件生效。

VUE3項(xiàng)目中 watch 各種不觸發(fā)

watch基本格式

watch(監(jiān)聽(tīng)的數(shù)據(jù)，作用函數(shù)，監(jiān)聽(tīng)配置)

watch(data,
 (newData, oldData) => {},
 { immediate: true, deep: true })

deep:true 開(kāi)啟深度監(jiān)聽(tīng)

當(dāng)data為reactive數(shù)據(jù)時(shí)必開(kāi)啟，不然不觸發(fā)監(jiān)聽(tīng)

immediate:true 頁(yè)面渲染后立刻觸發(fā)監(jiān)聽(tīng)

最好所有watch都配置，不然會(huì)出現(xiàn)watch監(jiān)聽(tīng)不觸發(fā)問(wèn)題

 	const data = ref('開(kāi)始')
    const stu = reactive({
      name: '張三',
      age: '12'
    })
    watch(data, (newName, oldName) => {
      console.log("newName", newName);
    }{ immediate:true });
    // reactive對(duì)象可以直接監(jiān)聽(tīng)，但是oldName值會(huì)有問(wèn)題
    watch(stu, (newName, oldName) => {
      console.log("newName", newName);
    },{ deep: true,immediate:true });
    // 監(jiān)聽(tīng)reactive對(duì)象某個(gè)屬性變化
    watch(() => stu.name,(newVal,oldVal)=>{
      console.log(newVal,'新')
      console.log(oldVal,'舊')
    },{ deep: true,immediate:true })
    // 注意子組件的props也是reactive對(duì)象
    // props監(jiān)聽(tīng)
    props: {
      index: {
        type: Number,
      default: 0
      }
    },
    watch(() => props.index,(newVal,oldVal)=>{
      console.log(newVal,'新')
      console.log(oldVal,'舊')
    },{ deep: true,immediate:true })