When you’re developing with Vue, you might not often, but occasionally, come across, “Hey? I’m assigning asynchronous data to an array variable or an object variable that I’ve defined. Why is the data on the page still old and unchanged?” At this point you might try various things, such as taking the life cycle function
mounted()Change to
created(), so the data rebinding is directly ahead of your time
new Vue()Node; Or you can insert a value before your data is reassigned
alert(), directly and violently triggers update detection, but obviously we don’t allow this on the page; Or use it wisely
setTimeout(function(){},0)But if you test it a few times, you’ll see that I have no control over whether or not the timer will trigger, and why the hell it is. Finally, after hitting the south wall several times, you want to turn back, (how possible, you have to solve this problem, the project must be completed! “So you look for other ways to get around that wall, and then you tell yourself that you’ve finally solved it, but you have no idea what it’s all about, just waiting for it to explode when the project is delivered. Well, that’s the end of bragging. 

HTML

<template>
  <ul>
    <li v-for="data in formData" :key="data.id"> name: {{data. The name}}, age: {{data. The age}} < / li > < / ul > < / template >Copy the code

JavaScript

<script>
  export default {
    name: 'inspection'.data() {
      return {
        formData: [{
          id: 1,
          name: 'zhangsan',
          age: 20
        },{
          id: 2,
          name: 'lisi',
          age: 21
        },{
          id: 3,
          name: 'wangwu', age: 22}]}},mounted() {
      this.formData[0] = {
        id: 4,
        name: 'zhaoliu',
        age: 23
      };
    }
  }
</script>Copy the code

(Style is not shown here) Here is the result:



It’s not giving face at all! So why is that, you know, the data is mounted and rendered, written in
mounted()What else is there? Cool, of course. You could write it down
created()But what if this is asynchronous data? How can we guarantee that we’ll get the data within a certain life cycle? No way! 5G is not even possible! So what’s the solution? ! Set one’s sights on
Object.defineProperty(), this is native JS method, cow force of it! Vue updates check on this thing
setter(),
getter(). So, how do you use it to trigger this kind of data update detection anytime, anywhere?
The official documentationGiven a clear method, here is a direct look at the successful example: 





HTML

<template>
  <ul>
    <li v-for="data in formData" :key="data.id"> name: {{data. The name}}, age: {{data. The age}} < / li > < / ul > < / template >Copy the code

JavaScript

<script>
import Vue from 'Vue'

  export default {
    name: 'inspection'.data() {
      return {
        formData: [{
          id: 1,
          name: 'zhangsan',
          age: 20
        },{
          id: 2,
          name: 'lisi',
          age: 21
        },{
          id: 3,
          name: 'wangwu', age: 22}]}},mounted() {
      Vue.set(this.formData, 0 , {id: 4, name: 'zhaoliu', age: 23});
      // this.formData.splice(0, 1, {id: 4, name: 'zhaoliu', age:23});
    }
  }
</script>Copy the code



Ok, this successfully triggers Vue update detection! Push () pop() Shift () unshift() splice() sort() reverse()

Tip: You can't replace an array item directly, but you can change the value of an array item without having to trigger it as in this article. In the case of objects, you just can't add or delete a key-value pair directly, but you can definitely change the attribute value