javascript – 当底层数据发生变化时,Vue.js组件内部状态被重用

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

以下代码片段(jsfiddle也可用here)演示了其中一些问题.测试组件vue组件接收属性值并使用该值更新其内部状态.

每当数据集发生变化时(通过排序或新数据),属性都会更新,但内部状态不会更新.通过运行代码段并单击按钮,可以很容易地看到这一点.

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

>是否存在在组件发生时触发的生命周期回调
“刷新”？我想要一个组件刷新回调.我是否需要单独观察道具变化？那将是丑陋的.
>当道具改变时,是否有一种更新内部状态的干净方法？
>是否有可能销毁所有子组件并强制重新创建它们？我知道这不是最好的选择,但它会解决我所有的数据绑定问题:)
> 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 3'];
      }
      
      this.dataToggle = !this.dataToggle;
    }
  }
});