Vue：对象更改检测注意事项

最新推荐文章于 2024-04-14 19:03:07 发布

转载最新推荐文章于 2024-04-14 19:03:07 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qjuly/p/8557406.html

文章标签：

#javascript #json #ViewUI

本文介绍了Vue中如何处理对象属性的动态添加与更新问题。针对JavaScript的限制，Vue无法自动跟踪对象属性的增删变动。文章提供了使用Vue.set或vm.$set的方法来实现对嵌套对象响应式属性的添加，并展示了通过Object.assign进行批量属性更新的正确实践。

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(vm.userProfile, 'age', 27)

　有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

下面的例子以此结束这篇博客：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue对象更改检测注意事项例子</title>  
	<script src="vue.js"></script>
	
</head>
<body>
  <div id="app">
  <button @click="add()">添加</button>
     <ul>
	   <li v-for="item in items">
	     {{ item }}
	   </li>
	 </ul>
  </div>  
 
  <script>
   new Vue({
      el:"#app",
	  data:{
	    items:{
		   name:"daming"
		}
	  },
	  methods:{
	    add(){
		  Vue.set(this.items,'age', 20);
		 //this.$set(this.items,"age",20); 两者是等价的
		}
	  }
   })
  </script>
</body>
</html>

　可以同时添加多个属性如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue对象更改检测注意事项例子</title>  
	<script src="vue.js"></script>
	
</head>
<body>
  <div id="app">
  <button @click="add()">添加</button>
     <ul>
	   <li v-for="item in items">
	     {{ item }}
	   </li>
	 </ul>
  </div>  
 
  <script>
   new Vue({
      el:"#app",
	  data:{
	    items:{
		   name:"daming"
		}
	  },
	  methods:{
	    add(){
		 this.items = Object.assign({},this.items,{
		    age:20,
			sex:"male"
		  })
		}
	  }
   })
  </script>
</body>
</html>

转载于:https://www.cnblogs.com/qjuly/p/8557406.html