Javascript Vue.js组件在基础数据更改时重复使用的内部状态

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

下面的代码片段（也可以使用JSFIDLE）演示了其中的一些问题。测试组件vue组件接收属性值并使用该值更新其内部状态

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

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

是否有生命周期回调，当组件运行时触发该回调
“刷新”？我想要一个只刷新组件的回调。我需要单独观察道具的变化吗？那太难看了

当道具改变时，是否有一种干净的方法来更新内部状态

是否可以销毁所有子组件并强制重新创建它们？我知道这不是最好的选择，但它可以解决我所有的数据绑定问题：）

vue如何决定何时发布或重用组件？在我的示例中，当数据集大小从4更改为3时，组件将消失，但前3项的内部状态不会更改，因此前3项将被回收 将所有状态移动到vuex是一个可能的解决方案，但有些组件是通用的，我不希望它们包含有关vuex存储详细信息的知识。实际上，我对大多数组件都使用vuex，但对于真正的通用组件，我认为这不是一个好的选择

var testComponent=Vue.component（'test-component'）{
模板：“#组件_模板”，
道具：['prop1']，
数据：函数（）{
返回{
内部状态：this.prop1
}
}
})
新Vue({
el:“应用程序”，
数据：函数（）{
返回{
项目：[
“项目1”，
“项目2”，
“项目3”
],
dataToggle:true，
排序：正确
};
},
方法：{
sortDataSet:函数（）{
if（this.sorted）{
this.items.reverse（）；
}否则{
这个.items.sort；
}
}
，changeDataSet:function（）{
if（this.dataToggle）{
this.items=['Item 4'、'Item 5'、'Item 6'、'Item 7']；
}否则{
this.items=['Item 1'、'Item 2'、'Item 3']；
}
this.dataToggle=！this.dataToggle；
}
}
});

未更新组件的内部状态
更改数据
排序数据




Prop:{{prop1}}| |内部状态：{{internalState}}
使用一个

建议尽可能提供带v-for的钥匙，
除非迭代的DOM内容很简单，或者您有意
依靠默认行为获得性能提升




更新。
谢谢@bertevans此行为不应为默认行为。这是违反直觉的，可能会导致隐藏的bug。@WilsonFreitas它确实会导致许多人绊倒。
<li v-for="item in items" :key="item">
    <test-component :prop1="item">
    </test-component>
</li>