vue.js - vue updated 仅运行一次，并且在父元素中进行更改后不再运行

Question

我在 vue3 中遇到了一个奇怪的行为。

我像这样在父元素中设置提供。

应用程序.vue

data(){
    return{
    allData:[],
    ingCollection:[],
    selectedDish:[],
    selectedIngred:[]
    }
  },


mounted(){
    Promise.all([
      d3.json('data.json'),
      d3.json('ingredientsonly.json')
    ]).then((data)=>{
      data[0].forEach((d)=>{
        this.allData.push(d)
      })
      data[1].forEach((t,i)=>{
        // for ingredient selection, 
        // later on, need to sort the ingredients by
        // frequency of the ingredients in the data set
        if(i<100){
      this.ingCollection.push(t)
        }
      })

    })
  },


provide() {
    return{
    allData:this.allData,
    ingCollection:this.ingCollection,
    selectedDish:this.selectedDish,
    receiveIngredients:this.receiveIngredients,
    selectedIngred:this.selectedIngred
    }
  }

子元素 - sidePanel.vue

inject:['selectedIngred'],

updated(){

    console.log('firstly updated')
    console.log(this.selectedIngred)
}

当我在“selectedIngred”中进行更改时，它只运行一次 updated() 生命周期挂钩，updated() 不会在子元素中运行。

这是为什么？

谢谢

标签： vue.jsdata-visualization