Take a look at the following code

import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;

const myData = {
  n: 0
};
console.log(myData)
const vm = new Vue({
  data: myData,
  template: `
      

       {{n}} 
       
      
 `.methods: {
    add() {
      // this.n+=10
      myData.n += 10;
    }
  }
}).$mount("#app");
setTimeout(() = > {
  myData.n += 10;
  console.log(myData);
  console.log(vm);
}, 3000);
console.log(myData)
Copy the code

The result is

Log gives me myData

You can seenfrom{n:0}becomen:(...)Why??

Second,getter

1. How do I get my name without ()

Look at the first piece of code

Let obj1={surname :" gao ", surname :" yuan yuan ", surname (){return this. + this. Name; }, age:18} console.log(obj1. name ()); // Here we need () // output: gao Yuan YuanCopy the code

2. Look at the second code

letObj2 = {name:"High"The name:"Yuan yuan", get name (){// get is given here
    return thisThe last name +this. Name; },age:18
}
consoleThe log (obj2. Name);// There is no need for ()
// Same output: gao Yuan Yuan
Copy the code

Summary: A getter is an unparenthesized function that gets a value

Three,setter

setterSet the value

letObj2 = {name:"High"The name:"Yuan yuan", get name (){// get is given here
    return thisThe last name +this. Name; }, set name (XXX){this. Last name = XXX [0]
    this. Name = XXX. Slice (1)}} obj"Zhao Liying"
console.log(` surnameThe ${obj. Last name}Name,The ${obj. Name}`);// There is no need for ()
// Output: name zhao, name Liying
Copy the code

Print out the objconsole.log(obj)

As you can see, obj has a name :(…) We can read and write names, but there is no property that is a name. And the same is true for n

Four, Object. DefineProperty

Define a new property directly on an object

Object. DefineProperty (Object, definition of an attribute, {the get () {}, the set () {}}

Object.defineProperty(obj,'xxx'}{
    get(){
    return _xxx
    }
    set(value){
    _xxx=value 
}}
Copy the code

5. Agency and monitoring

1. A code

Let data1={} object.defineProperty (data1,'n',{value:0} console.log(' ${data1.n} ') // Output :0Copy the code

2. Code 2: n cannot be less than 0

Object.defineproperty (data2,'n',{get(){return this._n}, Set (value){if(value<0) return this._n=value}}) console.log(' ${data2.n} ') data2.n=-1 console.log(' ${data2.n} failed to set to -1 ') Data2.n =1 console.log(' ${data2.n} set to 1 success ') // Output: 0 0 set to -1 failure 1 Set to 1 successCopy the code

But what if data._n is changed?

3. The agent

Let data3=proxy({data:{n:0}}) 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} console.log(' ${data3.n} ') data3.n=-1 Console. log(' ${data3.n}, set -1 failed ') data3.n=1 console.log(' ${data3.n}, set 1 succeeded ') // Output: 0 0 set -1 failed 1 set 1 succeededCopy the code

Change the value of data by changing obj, which is the proxy but if you manipulate myData directly you can also make n<0. Look at the code

MyData ={n:0} let data4=proxy({data:myData}) N =-1 console.log(' ${data4.n} ') mydata.n =-1 console.log(' ${data4.n}, was the setup successful ') // Output: 0-1, was the setup successfulCopy the code

As you can see from the output, you can make n<0 directly with myData and then intercept the user to modify the value of myData directly

Function proxy2({data}){let value=data.n // Save first n delete data.n // save first n delete data.n // This sentence can not be written, Object.defineproperty (data,'n',{get(){return value}, Set (newValue){if(newValue<0) return value=newValue}}) // This code listens for data const obj={} object.defineProperty (obj,'n',{ get(){ return data.n }, Set (value){if(value<0) return data.n=value}}) return obj} console.log(' ${data5.n} ') Mydata5. n=1 console.log(' ${data5.n}, set to -1 failed ') mydata5. n=1 console.log(' ${data5.n}, set to 1 succeeded ') 0, 0, set it to -1 failed 1, set it to 1 succeededCopy the code

conclusion

Object.defineProperty

• You can add a value attribute to an object

• You can add getters/setters to objects

• Getters/setters are used to monitor reads and writes of properties

The agent

• Read and write to properties of the myData object, but another object has full vm control

• So vm is the proxy for myData

let vm = new Vue({data:myData})

• Make the VM a proxy for myData

• The properties of myData are monitored

  1. Why monitor, in case the myData property changes but the VM doesn’t know about it
  2. Okay, so I can call render (data)
  3. So, VUE will listen on the data inside, and the newly generated object will become vUE’s proxy