What is Vue data responsiveness

An object is responsive when it responds to external stimuli

  • If I punch you and you cry pain, you’re responsive
  • When I modify the data in the Vue instance, the view is re-rendered and the latest content appears. This is the data response of Vue

Ex. :

const vm = new Vue({
  components: { Demo },
  data: {
    n: 0
  },
  template: ` 
      

        {{n}} 
        
      
 `.methods: {
    add() {
      this.n += 1
    }
  }
}
).$mount('#run')

Copy the code

The number n shows up as 0 on the page, and when I press the +1 button, the number +1, that’s the data response

Response principle

Vue uses the Object.defineProperty function to add or modify Object properties, getters, and setters precisely to read and write content

Object.defineProperty

let data1 = {}

Object.defineProperty(data1, 'n', {
  value: 0
})
// Define n with object.defineProperty

Copy the code

Getters and setters:

let obj = {
    a: 1.get b() {return this.a+1;
    },
    set c(value) {this.a += value
    }
}
console.log(obj.a)      // 1, the current value of a in obj
console.log(obj.b)      // 2, call b directly without parentheses
obj.c = 10
console.log(obj.a)      // 11, set the value of a through c
console.log(obj.b)      / / 12
Copy the code

When object.defineProperty is used in combination with getters and setters, we can implement one Object to control the reading and writing of another Object, namely proxy

let data1 = proxy({ data: {n:0}})// The parentheses are anonymous objects that cannot be accessed

function proxy({data}){
  const obj = {}
  Object.defineProperty(obj, 'n', { 
    get(){
      return data.n
    },
    set(value){
      if(value<0)return
      data.n = value
    }
  })
  return obj // obj is the proxy, data1 is obj
}
Copy the code

Do you see any similarities between the above code and Vue?

Let data = proxy({data:{n:0}}) ≈ vm=new Vue({data:mydata})

Now that we have a look at what Vue does, does it give us a clue?

vm=new Vue({data:mydata})

  1. Vue makes the VM a proxy for MyData
  2. All properties of MyData are monitored
  3. Trigger UI updates when data changes

Vue的data的bug

We use Object.defineProperty(obj,’n’,{… }), must have a ‘n’, and Vue to save computing power, will only check the first layer attributes, if n is at the second layer, there is no warning. What if I forget to set this ‘n’?

Like this:

new Vue({
  data: {
    obj: {
      a: 0 // obj. A will be listened by Vue & proxy}},template: ` 
      

        {{obj.b}} 
        
      
 `.methods: {
    setB() {
      this.obj.b = 1; // There are no warnings or reminders, but obj. B = 1 does not work
    }
  }
}).$mount("#app");
Copy the code

Solutions:

Use Vue. Set or this.$set (they are identical, either is fine).

The same code, this time we use vue.set

new Vue({
  data: {
    obj: {
      a: 0 // obj. A will be listened by Vue & proxy}},template: ` 
      

        {{obj.b}} 
        
      
 `.methods: {
    setB() {
      Vue.set(this.obj,'b'.1)// This time it will pass
    }
  }
}).$mount("#app");
Copy the code

What does vue.set do?

  1. The new key
  2. Automatically create agents and listeners if none have been created
  3. Triggering UI updates

Array variation method

  • There’s no way to pre-declare all the keys, because array keys are subscripts, and arrays can always grow, so for example, clicking on a button doesn’t add D to the array, because there’s no key with subscript 3 in the array
new Vue({
  data: {
    array: ["a"."b"."c"]},template: ` 
      

        {{array}} 
        
      
 `.methods: {
    setD() {
      this.array[3] = "d"; // After the button is clicked, d is not added to the page
      
    }
  }
}).$mount("#app");
Copy the code

Solutions:

Yu Yu Creek gives us a convenient way to use push directly

new Vue({
  data: {
    array: ["a"."b"."c"]},template: ` 
      

        {{array}} 
        
      
 `.methods: {
    setD() {
      this.array.push('d')// This pushes 'd' into array
      
    }
  }
}).$mount("#app");
Copy the code

The push method provided by You has been modified to include an additional layer of prototypes with seven apis: Push (new), POP (last), Shift (first), unshift (first new), splice (remove something from the middle), sort (positive order), reverse (reverse order), and then this layer of archetypes points to the actual push