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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。