Vue中，修改了数据，视图不更新的理解和处理方式

旧城等待， 2023-07-14 05:45 3阅读 0赞

*  问题：Vue中给data中的对象属性添加一个新的属性时，经过打印发现数据是已经改变了，但视图不更新
 *  原因： 但是由于在Vue实例创建时，新添加的属性并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新
 *  解决方法：
    
    这时就需要使用Vue的全局api——> `$set()`
    
    $set()使用方法：
    
    $set(需要修改的对象，“对象的属性”,值)

<body>
    	<div id="app">
    		<ul>
    			<li v-for="(item,index) in obj" :key='index'>{ { item}}</li>
    		</ul>
    		<button @click='add'>添加新属性d</button>
    	</div>
    
    
    	<script type="text/javascript" src="vue.js"></script>
    	<script type="text/javascript">
    		
    		new Vue({ 
    			el:'#app',
    			data(){ 
    				return { 
    					obj:{ 
    						'a':'我是a',
    						'b':'我是b',
    						'c':'我是c',
    					}
    				}
    			},
    			methods:{ 
    				add(){ 
    					this.obj.d='我是d'
    					// this.$set(this.obj,'d','我是d')
    					console.log(this.obj)
    				}
    			}
    		})
    	</script>
    </body>

效果：  
![在这里插入图片描述][2020031316342928.png]  
将上述代码的add()改为：

add(){ 
    		// this.obj.d='我是d'
    		this.$set(this.obj,'d','我是d')
    		console.log(this.obj)
    	}

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]

[2020031316342928.png]: /images/20230529/4b0d35553de94a54bb1d0cf6c1dff64e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]: /images/20230529/d32f5a815e3b45a384b81713b9e7c87d.png