我正在开发基于vue.js的中型Web应用程序.我一直面临着几个与vue实例生命周期有关的虚拟DOM问题.
以下代码片段(此处也提供了 jsFiddle )演示了其中的一些问题.所述检测成分 VUE组件接收的属性值,并使用该值来更新其内部状态.
每当数据集发生变化时(通过排序或新数据),属性都会更新,但内部状态不会更新.通过运行代码段并单击按钮,可以很容易地看到这一点.
我理解数据组件属性是一个函数,看起来它只在创建组件时才被调用.这种情况解释了发生了什么.问题是我不知道如何实现预期的行为:每当数据源发生变化时,所有子组件内部状态都要更新.
将所有状态移动到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', …