Wil*_*tas 5 javascript vue.js virtual-dom
我正在开发基于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', '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>使用钥匙。
建议尽可能使用 v-for 提供键，除非迭代的 DOM 内容很简单，或者您有意依赖默认行为来提高性能。
<li v-for="item in items" :key="item">
<test-component :prop1="item">
</test-component>
</li>
更新了小提琴。
| 归档时间： |
|
| 查看次数： |
644 次 |
| 最近记录： |