vue.js - 将传递的 props 绑定(bind)到数据时，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
    }
  }
})

我知道绑定(bind)不会更改，因为它仅在传递时实例化，但如果您看到 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>