脚本宝典收集整理的这篇文章主要介绍了

Vue 不能检测到对象属性的添加或删除,注意!!!

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 不能检测到对象属性的添加或删除</h2> <ul> <li>划重点了:<code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 不能检测到对象属性的添加或删除</code> </li> </ul> <p>官网——深入响应式原理(<a href="https://cn.vuejs.org/v2/guide/reactivity.html#" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide...</a>)中介绍到:受现代 JavaScript 的限制 (以及废弃 Object.observe),<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。</p> <p><span class="img-wrap"><img data-src="/img/bVbam0Z?w=556&amp;h=478" src="/img/bVbam0Z?w=556&amp;h=478" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <blockquote><p>上面的a是响应式的,所以a的改变后会自动渲染页面;<br />但是b是在vm实例创建之后添加的属性,所以他不是响应式的,当我们改变b的值的时候,通过DevTool看到的数据并不会改变,除非我们在DevTool中刷新数据,而且页面也不会刷新。</p></blockquote> <h4>有三种解决方案:</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var vm = new Vue{ el: &quot;#app&quot;, data:{ obj:{ name: &quot;aaa&quot; } } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">var</span> <span class="hljs-string">vm = new Vue{</span> <span class="hljs-attr">el</span>: <span class="hljs-string">"#app",</span> <span class="hljs-attr">data</span>:<span class="hljs-string">{</span> <span class="hljs-attr">obj</span>:<span class="hljs-string">{</span> <span class="hljs-attr">name</span>: <span class="hljs-string">"aaa" </span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span></code></pre> <p><strong>1、方案一:利用Vue.set(object,key,value)</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" Vue.set(vm.obj,&quot;sex&quot;,&quot;man&quot;) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> Vue.<span class="hljs-keyword">set</span>(vm.obj,<span class="hljs-string">"sex"</span>,<span class="hljs-string">"man"</span>) </code></pre> <p><strong>2、方案二:利用<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$set(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.object,key,value)</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="this.$set(this.obj,&quot;sex&quot;,&quot;man&quot;) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$<span class="hljs-keyword">set</span>(<span class="hljs-keyword">this</span>.obj,<span class="hljs-string">"sex"</span>,<span class="hljs-string">"man"</span>) </code></pre> <p><strong>3、方案三:利用Object.assign({},this.obj)</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="this.obj.sex = &quot;man&quot;; this.obj = Object.assign({},this.obj) //或者下面方式 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code><span class="hljs-keyword">this</span>.obj.sex = <span class="hljs-string">"man"</span>; <span class="hljs-keyword">this</span>.obj = Object.assign({},<span class="hljs-keyword">this</span>.obj) <span class="hljs-comment">//或者下面方式</span> </code></pre> <p>this.obj = Object.assign({},this.obj,{"sex","man"})</p> <p><strong>DEMO实例:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <template></p> <div class=&quot;parent&quot;> <h1 v-show=&quot;mainData.test.boolen&quot;>{{msg}}</h1> <p> <button @click=&quot;getData&quot;>数据</button><br /> <select name=&quot;&quot; id=&quot;&quot; @change=&quot;selectChange&quot;><option value=&quot;001&quot;>上海</option><option value=&quot;002&quot;>北京</option><option value=&quot;003&quot;>天津</option></select></p> <ul> <li v-for=&quot;(item,index) in list&quot; :key=&quot;index&quot; v-show=&quot;index < 10&quot;> <span class=&quot;red&quot;>{{item.id}}</span><br /> <strong class=&quot;blue&quot;>{{item.title}}</strong> </li> </ul></div> <p></template><br /> <script> export default { name: &quot;Parent&quot;, data() { return { count: 10, size: 1024, mainData: { test: { aa: 12 } }, msg: &quot;这是测试信息&quot;, list: [] }; }, methods: { getData: function() { var self = this; this.$axios.get(&quot;http://jsonplaceholder.typicode.com/posts&quot;).then(rsp => { self.list = rsp.data; self.$set(self.mainData.test, &quot;boolen&quot;, false); }); }, selectChange: function() { var self = this; self.$set(self.mainData.test, &quot;boolen&quot;, true); } } }; </script></p> <style scoped> ul li { border: 1px solid #ddd; margin-bottom: 10px; text-align: left; } .red { color: red; } .blue { color: blue; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parent"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"mainData.test.boolen"</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"getData"</span>&gt;</span>数据<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">""</span> <span class="hljs-attr">id</span>=<span class="hljs-string">""</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"selectChange"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"001"</span>&gt;</span>上海<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"002"</span>&gt;</span>北京<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"003"</span>&gt;</span>天津<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item,index) in list"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"index"</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"index &lt; 10"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"red"</span>&gt;</span>{{item.id}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blue"</span>&gt;</span>{{item.title}}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">"Parent"</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">count</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">1024</span>, <span class="hljs-attr">mainData</span>: { <span class="hljs-attr">test</span>: { <span class="hljs-attr">aa</span>: <span class="hljs-number">12</span> } }, <span class="hljs-attr">msg</span>: <span class="hljs-string">"这是测试信息"</span>, <span class="hljs-attr">list</span>: [] }; }, <span class="hljs-attr">methods</span>: { <span class="hljs-attr">getData</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>; <span class="hljs-keyword">this</span>.$ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>.get(<span class="hljs-string">"http://jsonplaceholder.typicode.com/posts"</span>).then(<span class="hljs-function"><span class="hljs-params">rsp</span> =&gt;</span> { self.list = rsp.data; self.$set(self.mainData.test, <span class="hljs-string">"boolen"</span>, <span class="hljs-literal">false</span>); }); }, <span class="hljs-attr">selectChange</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>; self.$set(self.mainData.test, <span class="hljs-string">"boolen"</span>, <span class="hljs-literal">true</span>); } } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-tag">ul</span> <span class="hljs-selector-tag">li</span> { <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ddd</span>; <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">10px</span>; <span class="hljs-attribute">text-align</span>: left; } <span class="hljs-selector-class">.red</span> { <span class="hljs-attribute">color</span>: red; } <span class="hljs-selector-class">.blue</span> { <span class="hljs-attribute">color</span>: blue; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>实现的效果如下:(使用的方案二方法)</p> <p>(1)、下拉框选项改变的时候,会显示“这是测试信息“文字<br /><span class="img-wrap"><img data-src="/img/bVbarPD?w=572&amp;h=338" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>(2)、点击”数据“按钮,获取数据,“这是测试信息“文字会隐藏<br /><span class="img-wrap"><img data-src="/img/bVbarQc?w=1154&amp;h=498" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue 不能检测到对象属性的添加或删除,注意!!!

全部内容,希望文章能够帮你解决

Vue 不能检测到对象属性的添加或删除,注意!!!

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过