javascript-为什么VueJS检测到此属性被添加到数组中的对象?
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-为什么VueJS检测到此属性被添加到数组中的对象?,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2962字,纯文字阅读大概需要5分钟。
内容图文
![javascript-为什么VueJS检测到此属性被添加到数组中的对象?](/upload/InfoBanner/zyjiaocheng/668/cdb1f35602fc4155905000acb9cf05c0.jpg)
在下面的代码段中,我有两个Vue组件,每个组件都有一个包含两个对象的items数组.如果每个组件的模板的show属性为true,则将其设置为显示items数组的对象.数组中的第一个对象最初的显示值为true.第二个对象未设置显示值.
new Vue({
el: '#ex1',
data: () => ({ items: [{name: 'apple', show: true}, {name: 'banana'}] }),
mounted() {
// 2nd item's show property setting is not detected here
this.items[1].show = true;
}
})
new Vue({
el: '#ex2',
data: () => ({ items: [{name: 'apple', show: true}, {name: 'banana'}] }),
mounted() {
// 2nd item's show property setting IS detected...
this.items[1].show = true;
// ...when the 1st item's show property is set to false
this.items[0].show = false;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="ex1">
Example 1:
<div v-if="items[0].show">{{ items[0] }}</div>
<div v-if="items[1].show">{{ items[1] }}</div>
</div>
<div id="ex2">
Example 2:
<div v-if="items[0].show">{{ items[0] }}</div>
<div v-if="items[1].show">{{ items[1] }}</div>
</div>
在第一个示例中,我将items数组中第二个对象的show属性设置为true. Vue未检测到预期的模板更改.
在第二个示例中,我将第二个对象的show属性设置为true,然后将第一个对象的show属性设置为false.在这种情况下,Vue确实会检测items数组的两个元素中的更改并相应地更新模板.考虑到Vue的Change Detection Caveats,我不希望这样.
这似乎是一个无害的错误(如果甚至可以视为错误),因此我不确定是否值得报告.但是,我想知道是否有人能够解释这种行为.在第二个示例中,Vue为什么检测到show属性添加到对象?
解决方法:
更改反应特性(显示第一个对象)将触发重新渲染. Vue忠实地呈现模板引用的对象的当前状态,其中包括第二个对象.
第二个对象的show属性仍然不是反应性的,对其的更改将不会更新Vue.只是触发第一个对象的反应性属性状态的更改即可触发更新.
换句话说,更改第二个对象的show属性(因为它是在事后添加的)将永远不会更新Vue,但是更改第一个对象的show属性将始终更新,并且更新将仅呈现Vue的当前状态.数组,无论如何添加.
我不会认为这是一个错误.
一种了解差异的简单方法是在更新后将阵列记录到控制台.您将看到没有观察到第二个对象的show属性,但该属性仍然存在.
编辑
我想根据评论稍作澄清.对第二个对象所做的更改出现在Vue中的原因是因为重新渲染了整个Vue,并且在Vue中直接引用了第二个对象.例如,如果您将值传递给组件,则不会重新渲染第二个对象.
这是一个示例,显示将值传递给组件时,第二个对象从不更新(因为组件管理渲染).
console.clear()
Vue.component("item", {
props: ["item"],
template: `
<div>Item Show: {{item.show}}</div>
`
})
new Vue({
el: '#ex2',
data: () => ({ items: [{name: 'apple', show: true}, {name: 'banana'}] }),
mounted() {
// 2nd item's show property setting IS detected...
this.items[1].show = true;
// ...when the 1st item's show property is set to false
this.items[0].show = false;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="ex2">
This will show false, because that is the current state and this object's show
property is reactive
<item :item="items[0]"></item>
<hr>
This will not show *anything*, despite the current state of show=true
because the object's show property is not reactive
<item :item="items[1]"></item>
</div>
内容总结
以上是互联网集市为您收集整理的javascript-为什么VueJS检测到此属性被添加到数组中的对象?全部内容,希望文章能够帮你解决javascript-为什么VueJS检测到此属性被添加到数组中的对象?所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。