When using a formula in Excel, such as sum(A1, B1), changing the value of cell A1 or B1 will change the result of the formula, which is an implementation of the reactive formula.

responsive

When the Vue instance’s data is modified, the view is re-rendered and the modified content appears. This is the data response of Vue.

let myData = {n:0}
let data = proxy({ data:myData })

function proxy({data}){
    // All attributes should be iterated and manipulated
    
    / / to monitor n
    let value = data.n
    Object.defineProperty(data, 'n', {
        get(){
            // Do something about it
            return value
        },
        set(newValue){
            // Do something about it
            value = newValue
        }
    })
    
    // Create a proxy object
    const obj = {}
    Object.defineProperty(obj, 'n', {
        get(){
            // Do something about it
            return data.n
        },
        set(){
            // Do something about it
            data.n = value
        }
    }
    
    return obj    // Return the proxy object
}
Copy the code

This way, whenever you modify a property of myData or data, you know that the property has been modified and can respond, for example by rerendering the view.

Some of the problems

To add attributes to a Vue instance, either Vue. Set () or vm.$set() is required, otherwise Vue will not detect it.

data.a = 1                // Unable to respond
data.$set(data, 'b'.1)   // Can respond
console.log(Vue.set === data.$set) // true
Copy the code

A similar problem exists with arrays:

  1. Set the item directly using the index
  2. Modifying the array length

For both of these problems, arrays can be manipulated using vue. set or one of the seven variants provided by Vue:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()