Vue - ดูอาร์เรย์ของวัตถุอย่างลึกซึ้งและคำนวณการเปลี่ยนแปลงหรือไม่?

Question 1

ฉันมีอาร์เรย์ที่เรียกpeopleว่ามีวัตถุดังนี้:

ก่อน

[
  {id: 0, name: 'Bob', age: 27},
  {id: 1, name: 'Frank', age: 32},
  {id: 2, name: 'Joe', age: 38}
]

สามารถเปลี่ยนแปลงได้:

หลังจาก

[
  {id: 0, name: 'Bob', age: 27},
  {id: 1, name: 'Frank', age: 33},
  {id: 2, name: 'Joe', age: 38}
]

สังเกตว่าแฟรงค์เพิ่งอายุ 33 ปี

ฉันมีแอพที่ฉันพยายามดูอาร์เรย์คนและเมื่อค่าใด ๆ เปลี่ยนแปลงให้บันทึกการเปลี่ยนแปลง:

<style>
input {
  display: block;
}
</style>

<div id="app">
  <input type="text" v-for="(person, index) in people" v-model="people[index].age" />
</div>

<script>
new Vue({
  el: '#app',
  data: {
    people: [
      {id: 0, name: 'Bob', age: 27},
      {id: 1, name: 'Frank', age: 32},
      {id: 2, name: 'Joe', age: 38}
    ]
  },
  watch: {
    people: {
      handler: function (val, oldVal) {
        // Return the object that changed
        var changed = val.filter( function( p, idx ) {
          return Object.keys(p).some( function( prop ) {
            return p[prop] !== oldVal[idx][prop];
          })
        })
        // Log it
        console.log(changed)
      },
      deep: true
    }
  }
})
</script>

ฉันอิงตามคำถามที่ฉันถามเมื่อวานนี้เกี่ยวกับการเปรียบเทียบอาร์เรย์และเลือกคำตอบที่ใช้งานได้เร็วที่สุด

ดังนั้น ณ จุดนี้ฉันคาดว่าจะเห็นผลลัพธ์ของ: { id: 1, name: 'Frank', age: 33 }

แต่สิ่งที่ฉันได้รับกลับมาในคอนโซลคือ (จำไว้ว่าฉันมีมันอยู่ในส่วนประกอบ):

[Vue warn]: Error in watcher "people" 
(found in anonymous component - use the "name" option for better debugging messages.)

และในcodepen ที่ฉันสร้างผลลัพธ์ก็คืออาร์เรย์ว่างเปล่าและไม่ใช่วัตถุที่เปลี่ยนแปลงซึ่งเปลี่ยนไปซึ่งจะเป็นอย่างที่ฉันคาดไว้

หากใครสามารถแนะนำได้ว่าเหตุใดจึงเกิดขึ้นหรือฉันผิดพลาดตรงไหนที่นี่จะได้รับการชื่นชมอย่างมากขอบคุณมาก!

Question 2

ฟังก์ชันการเปรียบเทียบระหว่างค่าเก่าและค่าใหม่กำลังมีปัญหา จะเป็นการดีกว่าที่จะไม่ทำให้สิ่งต่างๆซับซ้อนมากนักเพราะจะเพิ่มความพยายามในการแก้ไขข้อบกพร่องในภายหลัง คุณควรทำให้เรียบง่าย

วิธีที่ดีที่สุดคือสร้างperson-componentและดูทุกคนแยกกันภายในส่วนประกอบของตัวเองดังที่แสดงด้านล่าง:

<person-component :person="person" v-for="person in people"></person-component>

โปรดดูตัวอย่างการใช้งานด้านล่างสำหรับการดูองค์ประกอบบุคคลภายใน หากคุณต้องการจัดการกับผู้ปกครองคุณสามารถใช้$emitเพื่อส่งเหตุการณ์ขึ้นไปโดยมีidบุคคลที่แก้ไข

Vue.component('person-component', {
    props: ["person"],
    template: `
        <div class="person">
            {{person.name}}
            <input type='text' v-model='person.age'/>
        </div>`,
    watch: {
        person: {
            handler: function(newValue) {
                console.log("Person with ID:" + newValue.id + " modified")
                console.log("New age: " + newValue.age)
            },
            deep: true
        }
    }
});

new Vue({
    el: '#app',
    data: {
        people: [
          {id: 0, name: 'Bob', age: 27},
          {id: 1, name: 'Frank', age: 32},
          {id: 2, name: 'Joe', age: 38}
        ]
    }
});

<script src="https://unpkg.com/vue@2.1.5/dist/vue.js"></script>
<body>
    <div id="app">
        <p>List of people:</p>
        <person-component :person="person" v-for="person in people"></person-component>
    </div>
</body>

ขยายข้อมูลโค้ด

Question 3

ฉันได้เปลี่ยนการใช้งานเพื่อแก้ไขปัญหาของคุณฉันสร้างวัตถุเพื่อติดตามการเปลี่ยนแปลงเก่าและเปรียบเทียบกับสิ่งนั้น คุณสามารถใช้เพื่อแก้ปัญหาของคุณ

ที่นี่ฉันสร้างวิธีการซึ่งค่าเก่าจะถูกเก็บไว้ในตัวแปรแยกต่างหากและจะถูกใช้ในนาฬิกา

new Vue({
  methods: {
    setValue: function() {
      this.$data.oldPeople = _.cloneDeep(this.$data.people);
    },
  },
  mounted() {
    this.setValue();
  },
  el: '#app',
  data: {
    people: [
      {id: 0, name: 'Bob', age: 27},
      {id: 1, name: 'Frank', age: 32},
      {id: 2, name: 'Joe', age: 38}
    ],
    oldPeople: []
  },
  watch: {
    people: {
      handler: function (after, before) {
        // Return the object that changed
        var vm = this;
        let changed = after.filter( function( p, idx ) {
          return Object.keys(p).some( function( prop ) {
            return p[prop] !== vm.$data.oldPeople[idx][prop];
          })
        })
        // Log it
        vm.setValue();
        console.log(changed)
      },
      deep: true,
    }
  }
})

ดู codepen ที่อัปเดต

Question 4

เป็นพฤติกรรมที่กำหนดไว้อย่างดี คุณไม่สามารถรับค่าเก่าสำหรับวัตถุที่กลายพันธุ์ได้ นั่นเป็นเพราะทั้งสองnewValและoldValอ้างถึงวัตถุเดียวกัน Vue จะไม่เก็บสำเนาเก่าของวัตถุที่คุณกลายพันธุ์

หากคุณแทนที่วัตถุด้วยวัตถุอื่น Vue จะให้ข้อมูลอ้างอิงที่ถูกต้องแก่คุณ

อ่านNoteหัวข้อในเอกสาร ( vm.$watch)

เพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่และที่นี่

Question 5

นี่คือสิ่งที่ฉันใช้เพื่อดูวัตถุอย่างลึกซึ้ง ความต้องการของฉันคือการเฝ้าดูช่องย่อยของวัตถุ

new Vue({
    el: "#myElement",
    data:{
        entity: {
            properties: []
        }
    },
    watch:{
        'entity.properties': {
            handler: function (after, before) {
                // Changes detected.    
            },
            deep: true
        }
    }
});

Question 6

โซลูชันส่วนประกอบและโซลูชันโคลนลึกมีข้อดี แต่ยังมีปัญหา:

บางครั้งคุณต้องการติดตามการเปลี่ยนแปลงในข้อมูลนามธรรม - การสร้างส่วนประกอบรอบ ๆ ข้อมูลนั้นไม่สมเหตุสมผลเสมอไป
การโคลนโครงสร้างข้อมูลทั้งหมดของคุณอย่างละเอียดทุกครั้งที่คุณทำการเปลี่ยนแปลงอาจมีค่าใช้จ่ายสูงมาก

ฉันคิดว่ามีวิธีที่ดีกว่านี้ หากคุณต้องการที่จะดูรายการทั้งหมดในรายการและรู้ซึ่งรายการในรายการการเปลี่ยนแปลงคุณสามารถตั้งค่าดูที่กำหนดเองในทุกรายการแยกต่างหากเช่นดังนั้น:

var vm = new Vue({
  data: {
    list: [
      {name: 'obj1 to watch'},
      {name: 'obj2 to watch'},
    ],
  },
  methods: {
    handleChange (newVal) {
      // Handle changes here!
      console.log(newVal);
    },
  },
  created () {
    this.list.forEach((val) => {
      this.$watch(() => val, this.handleChange, {deep: true});
    });
  },
});

ด้วยโครงสร้างนี้คุณhandleChange()จะได้รับรายการเฉพาะที่เปลี่ยนไป - จากที่นั่นคุณสามารถจัดการได้ตามต้องการ

ฉันได้บันทึกสถานการณ์ที่ซับซ้อนมากขึ้นที่นี่ในกรณีที่คุณกำลังเพิ่ม / ลบรายการในรายการของคุณ (แทนที่จะจัดการเฉพาะรายการที่มีอยู่แล้ว)