CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Sphinx
Sphinx

Reputation: 10729

Hook=componentUpdated of Vue directive not triggered

I just met one issue, if one component only update its own data, it will not trigger the hook=componentUpdated of the directive at the parent component.

As Vue official Guide said:

componentUpdated: called after the containing component’s VNode and the VNodes of its children have updated.

It seems componentUpdated should be triggered.

Did I do something wrong? or misunderstand something?

At below demo, hit Click Me! button then you will see componentUpdated is not called.

But when click change data (execute similar behavior with click me!, the difference is it changes the data at parent component), it will trigger correctly.

Many thanks for any.

Vue.config.productionTip = false
Vue.component('child', {
  template: `<div>{{point}}
                <span style="background-color:gray;font-weight:bold;color:red">
                  -{{mytest}}
                </span>
                <button @click="plusOne()">Click me!</button>
             </div>`,
  props: ['point'],
  data(){
    return {
      mytest: 1
    }
  },
  updated: function () {
    console.log('updated component=child')
  },
  methods: {
    plusOne() {
      this.mytest += 1
    }
  }
})

let vMyDirective = {}
vMyDirective.install = function install (Vue) {

  Vue.directive('my-directive', {
    inserted: function () {
      console.log('!!!directive for inserted')
    },
    bind: function bind (el, binding, vnode) {
      console.log('!!!directive for bind')
    },
    componentUpdated: function componentUpdated (el, binding, vnode) {
      console.log('!!!directive for component updated')
    },
    update: function () {
      console.log('!!!directive for update')
    }
  })
}

Vue.use(vMyDirective)

new Vue({
  el: '#app',
  data() {
    return {
      testValues: ['label a', 'label b'],
      testIndex: 1
    }
  },
  methods:{
    pushArray: function() {
      this.testValues.push('label c')
    },
    changeData: function () {
      this.testIndex += 1
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <button v-on:click="pushArray()">Add one Child!!!</button>
  <button v-on:click="changeData()">Change Data - {{testIndex}}</button>
  <div v-my-directive>
    <child v-for="(item, index) in testValues" :key="index" :point="item"></child>
  </div>
</div>

Upvotes: 4

Views: 1845

Answers (1)

Sphinx
Sphinx

Reputation: 10729

Based on Vue Team Feedback, it is not one issue on the hook=componentUpdated, it is my misunderstanding on the words.

For the prerequisite of the hook=comopnentUpdated is triggered, it is the VNode which the directive binds to already changed. That means if only child VNode changes, Vue will not catch it probably like what @Jacob Goh said in the comments (only flows one way).

So componentUpdated doesn't means it will detect child components are updated or not, it only means when will be triggered.

Upvotes: 1

Related Questions