?? ?new Vue({
?? ??? ?data(){
?? ??? ??? ?return {
?? ??? ??? ??? ?arr:[
?? ??? ??? ??? ??? ?{id:1,name:"haha",age:18},
?? ??? ??? ??? ??? ?{id:2,name:"hehe",age:19}
?? ??? ??? ??? ?]
?? ??? ??? ?}
?? ??? ?}
?? ?})
?? ?......
?? ?methods:{
?? ??? ?change(){
?? ??? ??? ?this.arr[0] = {id:1,name:"gege",age:30}; ?//這種寫法vue是不能檢測到的, 也就是說頁面的數(shù)據不會改變
?? ??? ??? ?this.arr[0].name = "gege";
?? ??? ??? ?this.arr[0].age = 30; ? //這種方式是可以檢測到的, 這是更改的數(shù)組內部的對象的屬性是可以檢測到變化的
?? ??? ??? ?//也可以使用 vue 提供的方法
?? ??? ??? ?this.$set(this.arr,0,{id:1,name:"gege",age:30}) ; //這種方法也是可以的
?? ??? ??? ?//還可以使用 vue 的變種函數(shù)
?? ??? ??? ?this.arr.splice(0,1,{id:1,name:"gege",age:30});
?? ??? ??? ?//這里的 splice方法其實已經不是 js 的 splice方法了, 它是被vue 改寫過的方法
?? ??? ?}
?? ?}

從上面我們可以看到，如果想要通過數(shù)組下標修改數(shù)組的話，vue 是檢測不到數(shù)據的變化的，要么使用 $set , splice 等數(shù)組的方法，要么就再向組數(shù)內部走一級，直接修改內部對象的屬性也是可以的

第二類：對于對象

vue 是可以檢測到對象中數(shù)據發(fā)生的改動的，因為初始化的時候對象的每一個屬性都生成好了 getter 和setter方法，但是我們如果在程序運行過程中動態(tài)的給對象添加新的屬性，刪除屬性，vue 是檢測不到的

?? ?new Vue({
?? ??? ?data(){
?? ??? ??? ?return {
?? ??? ??? ??? ?a:{
?? ??? ??? ??? ??? ?b:"c"
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ??? ?......
?? ??? ?mehtods:{
?? ??? ??? ?changes(){
?? ??? ??? ??? ?this.a.bb = "bbbb"; //這種寫法是在 a 對象上面添加了一個 bb 的屬性, vue 是檢測不到的
?? ??? ??? ??? ?//所以這種情況下, 我們要使用 $set?
?? ??? ??? ??? ?this.$set(this.a,"bb","bbbbb"); ?//這樣就可以解決問題,?
?? ??? ??? ?}
?? ??? ?}
?? ?})

上面只寫了添加對象屬性時的情況，刪除對象的屬性時，1.也可使用 $set

有時你可能需要為已有對象賦予多個新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應該用兩個對象的屬性創(chuàng)建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣：

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

你應該這樣做：

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

Vue檢測數(shù)據的原理

一個簡單的例子，總結一下vue監(jiān)測數(shù)據

<div id="app">
  <h1>學生信息</h1>
  <button @click="addSex">添加sex屬性，默認值為男</button>
  <button @click="changeSex">修改sex屬性</button>
  <button @click="unshiftFriend">在列表首位添加一個朋友</button>
  <button @click="changeFriendName">修改第一個朋友的名字為：張三</button>
  <button @click="addHobby">添加一個愛好</button>
  <button @click="changeHobby">修改第一個愛好為：開車</button>
  <h2>姓名：{{student.name}}</h2>
  <h2>性別：{{student.sex}}</h2>
  <h2>愛好：</h2>
  <ul>
    <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
  </ul>
  <h2>朋友們：</h2>
  <ul>
    <li v-for="(f,index) in student.friends" :key="index">{{f.name}} -- {{f.age}}</li>
  </ul>
</div>

const app = new Vue({
  el: "#app",
  data: {
    student: {
      name: "AIpoem",
      hobby: ["抽煙","喝酒","燙頭"],
      friends: [
        {name: "jerry",age: 18},
        {name: "Cici",age:19}
      ]
    }
  },
  methods: {
    addSex() {
      // this.student.sex = "男"  不是響應式
      this.$set(this.student,"sex","男");
    },
    changeSex() {
      // 直接改即可，因為上面添加的sex屬性為響應式
      this.student.sex='女'
    },
    unshiftFriend() {
      this.student.friends.unshift({name:"newFriend",age:20});
    },
    changeFriendName() {
      // 這里直接改即可，name屬性是響應式的
      this.student.friends[0].name = "張三";
    },
    addHobby() {
      this.student.hobby.push("新愛好");
    },
    changeHobby() {
      // this.student.hobby[0] = "開車" 不是響應式
      this.student.hobby.splice(0,1,"開車");
    }
  }
})

關于vue監(jiān)視對象：

直接添加的sex屬性，沒有getter和setter，無法實現(xiàn)響應式

利用Vue.set()添加的sex屬性，有getter和setter，可以實現(xiàn)響應式

另一種寫法，和上面作用一樣

關于vue監(jiān)視數(shù)組：

比如這個例子，一開始頁面是抽煙和喝酒，button綁定的點擊事件中的語句是this.student.hobby[0] = "學習";，之后再輸出app.student.hobby，可以發(fā)現(xiàn)數(shù)據確實已經改變，但是頁面是沒有相應變化的，因為這樣通過數(shù)組下標來改變數(shù)據的方式，vue監(jiān)測不到

正確寫法：this.student.hobby.splice(0,1,"學習");

總結一下

1.vue會監(jiān)視data中所有層次的數(shù)據

vue監(jiān)視的數(shù)據都是響應式的

2.如何監(jiān)測對象中的數(shù)據

通過setter實現(xiàn)監(jiān)視，且要在new Vue時就傳入要監(jiān)測的數(shù)據

(1).對象中后追加的屬性，Vue默認不做響應式處理

(2).如需給后添加的屬性做響應式處理

Vue.set(target, propertyName/index, value)

或

app.$set(target, propertyName/index, value)

3.如何監(jiān)測數(shù)組中的數(shù)據？

通過包裹數(shù)組更新元素的方法實現(xiàn)，本質上就是做了兩件事：

1.調用原生對應的方法對數(shù)組進行更新(push()、pop()、、、)
2.重新解析模版，進而更新頁面

4.在Vue中修改數(shù)組中的某個元素一定要用如下方法：

1.使用這些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse() 注意：以上為變更方法，會變更調用了這些方法的原始數(shù)組。也有非變更方法，例如filter()、concat()和slice()，它們不會變更原始數(shù)組，而總是返回一個新數(shù)組。當使用非變更方法時，可以用新數(shù)組直接替換舊數(shù)組
2.Vue.set()或app.$set()

特別注意：Vue.set()和app.$set()不能給app或者app的根數(shù)據對象(app._data)添加屬性

(target參數(shù)不可以是app或者app._data)

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: