5

我正在开发一个基于 vue.js 的中型 Web 应用程序。我一直面临着几个主要与 vue 实例生命周期相关的虚拟 DOM 问题。

以下代码片段（jsFiddle 也可在此处获得）演示了其中一些问题。test-component vue 组件接收一个属性值并使用该值更新其内部状态。

每当数据集更改（通过排序或新数据）时，属性都会更新，但内部状态不会。通过运行代码片段并单击按钮很容易看到这一点。

我了解数据组件属性是一个函数，看起来它仅在创建组件时才被调用。这种解释是怎么回事。问题是我不知道如何实现预期的行为，即：每当数据源更改时，所有子组件的内部状态都会更新。


  1. 组件“刷新”时是否会触发生命周期回调？我想要一个仅刷新组件的回调。我需要单独观察道具变化吗？那将是丑陋的。
  2. 当道具改变时，有没有一种干净的方法来更新内部状态？
  3. 是否可以销毁所有子组件并强制重新创建它们？我知道这不是最好的选择，但它可以解决我所有的数据绑定问题:)
  4. vue 如何决定何时发布或重用组件？在我的示例中，当数据集大小从 4 变为 3 时，组件会消失，但前 3 个项目的内部状态不会改变，因此前三个项目正在被回收。

将所有状态转移到 vuex 将是一个可能的解决方案，但某些组件是通用的，我不希望它们包含有关 vuex 存储详细信息的知识。实际上，我对大多数组件都使用 vuex，但对于真正通用的组件，我认为这不是一个好的选择。

var testComponent = Vue.component('test-component', {
  template: '#component_template',
  props: ['prop1'],
  data: function(){
    return {
      internalState: this.prop1 
    }
  }
})

new Vue({
  el: "#app",
  data: function(){
    return {
      items: [
        'Item 1',
        'Item 2',
        'Item 3'
      ],
      dataToggle: true,
      sorted: true
    };
  },
  methods: {
    sortDataSet: function(){
      if(this.sorted){
        this.items.reverse();
      } else {
        this.items.sort;
      }
    }
    ,changeDataSet: function(){
      if(this.dataToggle){
        this.items = ['Item 4', 'Item 5', 'Item 6', 'Item 7'];
      } else {
        this.items = ['Item 1', 'Item 2', 'Item 3'];
      }
      
      this.dataToggle = !this.dataToggle;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.js"></script>
<body>
  <h3>
    Components internal state is not being updated
  </h3>
  <div id="app">
    <button v-on:click="changeDataSet">
      Change data
    </button>
    <button v-on:click="sortDataSet">
      Sort data
    </button>
    <ul>
      <li v-for="item in items">
        <test-component :prop1="item">
        </test-component>
      </li>
    </ul>
  </div>
</body>

<script id="component_template" type="x-template">
	<div>Prop: {{prop1}} || Internal state: {{internalState}}</div>
</script>

4

1 回答 1

3

使用一键。

建议尽可能使用 v-for 提供一个键，除非迭代的 DOM 内容很简单，或者您有意依赖默认行为来提高性能。

<li v-for="item in items" :key="item">
    <test-component :prop1="item">
    </test-component>
</li>

更新了小提琴。

于 2017-05-03T16:17:53.277 回答