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

时间 2020-05-17

标签 vue 对象更改检测注意事项繁體版

原文原文链接

仍是因为 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：javascript

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

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

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

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

你能够添加一个新的 age 属性到嵌套的 userProfile 对象：vue

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

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

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

　有时你可能须要为已有对象赋予多个新属性，好比使用 Object.assign() 或 _.extend()。在这种状况下，你应该用两个对象的属性建立一个新的对象。因此，若是你想添加新的响应式属性，不要像这样：app

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

你应该这样作：this

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

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

<!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>

　能够同时添加多个属性以下：htm

<!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>