Data responsiveness responsiveness is a form of response to changes in the outside world. Const vm = new Vue({data:{n: 0}}) const vm = new Vue({data:{n: 0}}) render(data… N will respond to that response. This linkage process is the data response of vUE. Vue currently implements data responsiveness through Object.defineProperty

Let obj0 = {name: "gao ", name:" yuyuan ", age: 18}; Let obj1 = {last name: "gao ", last name:" yuan yuan ", last name () {return this. Name + this. }, age: 18 }; Console. log(" Requirement 1: "+ obj1. name ()); // Can you delete the parentheses after the name? No, because it's a function. Let obj2 = {family name: "high ", family name:" yuan yuan ", get family name () {return this. Name + this. }, age: 18 }; Console. log(" Requirement 2: "+ obj2. name); // Summary: This is how getters are used. Function without parentheses, that's all. Let obj3 = {surname: "gao ", surname:" yuan yuan ", get name () {return this. Name + this. }, set name (XXX){this. Surname = XXX [0] this. Name = xxx.slice(1)}, age: 18}; Obj3. name = 'gao Yuanyuan' console.log(' Requirement 3: last name ${obj3. ${obj3. name} ') // Summary: this is how setters work. Trigger the set function with = XXXCopy the code

Object.defineProperty

You can add properties to objects. Value You can add getters/seters and serters to objects to control reading and writing properties

Object.defineProperty(Obj,’m’,{… }) must have an ‘m’ in order to listen and delegate obj.n

Let data1 = {} object.defineProperty (data1, 'n', {value: 0}) console.log(' Requirement 1: ${data1.n} ') // Summary: This blob syntax complicates things? No, keep looking. // Requirement 2: Data2.n = -1 should not be valid, Let data2 = {} data2._n = 0 // _n is used to steal n values object.defineProperty (data2, 'n', {get(){return this._n}, set(value){if(value < 0) return this._n = value}}) console.log(' requirement 2: ${data2.n} ') data2.n = -1 console.log(' Requirement 2: ${data2.n} 'failed to set to -1) data2.n = 1 console.log(' Requirement 2: ${data2.n}') data2.n = 1 console.log(' Requirement 2: ${data2.n} set to 1 success ') // What if the other side uses data2._n directly? // You are very cruel // Function proxy({data :{n:0}}) let data3 = proxy({data :{n:0}}) */){const obj = {} // 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} // data3 is obj console.log(' 表 三 : ${data3.n} ') data3.n = -1 console.log(' requirement 3: ${data3.n} ', set to -1 failed ') data3.n = 1 console.log(' Requirement 3: ${data3.n} ', set to -1 failed ') ${data3.n}, set to 1 success ') // Yes! MyData = {n:0} let data4 = proxy({data:myData}) // data3 = obj console.log(' bar ') ${data4.n} ') mydata.n = -1 console.log(${data4.n} ') ? ') // If I change myData now, can I change it? ! // Need 5: Let myData5 = {n:0} let data5 = proxy2({data:myData5}) Function proxy2({data}/*){function proxy2({data}/* *); Let value = data.n object.defineProperty (data, 'n', {get(){return value}, Set (newValue){if(newValue<0)return value = newValue}}) 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} // data3 is obj console.log(' 表 5: ${data5.n} ') mydata5.n = -1 console.log(' Requirement 5: ${data5.n} ', set to -1 failed ') mydata5.n = 1 console.log(' Requirement 5: ${data5.n} ') mydata5.n = 1 console.log(' Requirement 5: ${data5.n} ') ${data5.n}, set to 1 succeeded ')Copy the code

Vue. Set and enclosing $set

1. The role

1.. Can add key 2.. Automatically create listener and proxy 3.. Trigger the UI and update it

New Vue({data: {obj: {a: 0 // obj. ` <div> {{obj.b}} <button @click="setB">set b</button> </div> `, methods: {setB () {Vue. Set (enclosing obj, 'b', 1) / / priority to use this. $set (enclosing obj, 'b', 1)}}}) $mount (" # app ");Copy the code