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

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

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

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

1.起因

在父組件引入子組件，子組件引入dialog是一個彈框。

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

2.解決方法

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

open-detail-dialog="openDetailDialog"

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

3.思路

Watch對應(yīng)的監(jiān)聽方法不被觸發(fā)，因為watch監(jiān)聽的key對應(yīng)的值沒有發(fā)生變化，所以加一個臨時的變量，然后通過對其取反，來保證每一次watch監(jiān)聽的值與上一次不同，從而是watch事件生效。

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

watch基本格式

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

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

deep:true 開啟深度監(jiān)聽

當data為reactive數(shù)據(jù)時必開啟，不然不觸發(fā)監(jiān)聽

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

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

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