監測數據原理

vue會監視data中所有層次的數據。只需要開啟deep:true 即可。

如何檢測對象中數據？通過setter實現數據監視，在 new vue()的時候就要傳入監測數據 (就是data里的變量唄)

• 對象中 直接追加屬性，vue不承認，不會做響應式處理

• 如果必須為后來添加屬性做響應式，使用如下API

  （1）Vue.set(target,propertyName,value)

  （2）this.$set(target,propertyName,value)

如何監測數組中的數據？

調用原生對應方法對數組進行更新

重新解析模板，進而更新頁面

Vue修改數組中的某個元素一定要用如下方法

• push、pop、shift、unshift、splice、sort、reverse （除非你暴力變更整個數組）
• Vue.set() vm.$set()

淺談數據劫持：

社會中，張三去超市買可樂，李四在半路上攔截，站住，你干嘛。李四就把張三的錢搶了，買可樂去了

代碼中，當我們修改data中的變量值，就會觸發setter，那么setter>就會阻止你，他會自己去修改變量值，然后重新解析模板

<div id="root"><h1>學生信息</h1><p>姓名：{{student.name}}</p><p>年齡：{{student.age}}</p><p>愛好：{{student.skill}}</p><button @click="student.age++">點擊增加年齡</button> <br><p v-if="student.sex">性別：{{student.sex}}</p><button @click="addSex">點擊添加默認性別</button><br><ul><button @click="addHobby">點擊增加業余愛好信息</button><button @click="updateHobby">點擊修改第一個愛好</button><h2>業余愛好信息</h2><li v-for="(h,index in student.hobby" :key="index">{{h}}</li></ul></div><script src="./vue.js"></script><script>const vm = new Vue({el:'#root',data:{student:{name:"洋蔥",age:19,hobby:['魔方','王者','學習'],},},methods:{addSex(){// Vue.set(this.student,'sex','男');this.$set(this.student,'sex','男');},addHobby(){this.student.hobby.push("打籃球");//對對象可以直接修改，這樣數據也是響應式，但是數組就不行，除非使用“傳說中的七個方法”才能修改數組，并且數據是響應式//push pop shift unshift reverse sort splice 七種方法},updateHobby(){// this.student.hobby.splice(0,1,'臺球') //成功修改//Vue.set(this.student.hobby,0,'臺球2號') //使用Vue.set也可以修改，并且數據仍是響應式數據this.$set(this.student.hobby,0,'臺球3號') //照樣修改成功了。}}})</script>

總而言之，如果一開始new vue實例的時候，data里的元素是具有getter與setter的。如圖1：

但是后期你如果僅僅是通過 vm._data.student.friends = {id:“001”,name:“張三”,age:13}來創建一個對象，那么，這個friends是沒有getter和setter的。
只能通過上文所提供的API，這樣追加的對象或者屬性才會有getter和setter

總結

以上是生活随笔為你收集整理的Vue之监测数据的原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。