绑定将props传递给数据时，VueJs不会更新

Question

我是vue的初学者。我想知道为什么值更新时不会触发vue的生命周期。

Vue.component('list-table', {
  props: ['data'],
  template: `
    <div>
      {{ mydata }}
    </div>
  `,
  beforeUpdate () { console.log('before update') },
  updated () { console.log('updated') },
  data () {
    return {
      mydata: this.data
    }
  }
})

const app = new Vue({
  el: '#app',
  data: {
    datum: [
      { f: 'John', l: 'Doe', g: 'Male' },
      { f: 'Jane', l: 'Doe', g: 'Female' },
      { f: 'John', l: 'Smith', g: 'Male' },
      { f: 'Jane', l: 'Smith', g: 'Female' },
      { f: 'Roy', l: 'Smith', g: 'Male' },
      { f: 'Reign', l: 'Smith', g: 'Female' }
    ],
    itemPerPage: 2,
    currentPage: 0
  },
  computed: {
    filteredList () {
      const startIdx = this.currentPage * this.itemPerPage
      const endIdx = startIdx + this.itemPerPage 
      return this.datum.slice(startIdx, endIdx)
    },
    totalPages () {
      return Math.ceil(this.datum.length / this.itemPerPage)
    }
  },
  methods: {
    setPage (num) {
      this.currentPage = num - 1
    }
  }
})

我知道绑定不会改变，因为它仅在传递时被实例化，但如果你看到updated函数，它将不会触发日志。这是a pen来检查它。

Answer 1

您正在将组件的本地数据初始化为prop中的内容，但不会使用prop，因此不会发生更新。如果您将组件更改为使用data而不是mydata，则会进行更新。

如果您想根据更新的数据进行一些更改，请对数据进行use a watch。

Vue.component('list-table', {
  props: ['data'],
  template: `
    <div>
      {{ data }}
    </div>
  `,
  beforeUpdate () { console.log('before update') },
  updated () { console.log('updated') },
  data () {
    return {
      mydata: this.data
    }
  }
})

const app = new Vue({
  el: '#app',
  data: {
    datum: [
      { f: 'John', l: 'Doe', g: 'Male' },
      { f: 'Jane', l: 'Doe', g: 'Female' },
      { f: 'John', l: 'Smith', g: 'Male' },
      { f: 'Jane', l: 'Smith', g: 'Female' },
      { f: 'Roy', l: 'Smith', g: 'Male' },
      { f: 'Reign', l: 'Smith', g: 'Female' }
    ],
    itemPerPage: 2,
    currentPage: 0
  },
  computed: {
    filteredList () {
      const startIdx = this.currentPage * this.itemPerPage
      const endIdx = startIdx + this.itemPerPage 
      return this.datum.slice(startIdx, endIdx)
    },
    totalPages () {
      return Math.ceil(this.datum.length / this.itemPerPage)
    }
  },
  methods: {
    setPage (num) {
      this.currentPage = num - 1
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<div id='app'>
  <table>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for='list in filteredList'>
        <td v-for='prop in list'>
          <list-table :data='prop' />
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <span v-for='page in totalPages'>
      <button @click='setPage(page)'>{{ page }}</button>
    </span>
  </div>
</div>

Answer 2

您需要做的就是修改mydata以触发更新。

您可以在this.mydata.paramThatDoesntExist = true

中执行：mounted ()

mounted () {
  this.mydata.forceUpdate = true
}

这样，当安装组件时，将修改mydata并更新组件。