Hook =未触发Vue指令的componentUpdated

时间:2018-06-01 01:06:58

标签: javascript vue.js vuejs2

我刚遇到一个问题,如果一个组件只更新自己的数据,它就不会触发父组件指令的hook = componentUpdated

正如Vue official Guide所说:

  

componentUpdated:在包含组件的VNode和之后调用   其子女的VNodes已更新。

似乎应该触发 componentUpdated

我做错了什么吗?还是误解了什么?

在下面的演示中,点击点击我!按钮,您将看到未调用 componentUpdated

但是当点击更改数据(执行与点击我!类似的行为,区别在于它更改了父组件的数据)时,它会正确触发。

非常感谢任何人。

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>

1 个答案:

答案 0 :(得分:1)

基于Vue Team Feedback,它不是hook = componentUpdated 上的一个问题,这是我对这些词的误解。

如果触发了hook = comopnentUpdated 的先决条件,则指令绑定的VNode已经更改。这意味着如果只有子VNode发生变化,Vue就不会像@Jacob Goh在评论中所说的那样捕获它(只是单向流动)。

所以 componentUpdated 并不意味着它会检测子组件是否更新,只表示何时会触发