Vue data responsiveness summary

let obj0 = {
 Last name: "高",
 Name: "Yuan Yuan",
 age: 18
};

// Requirement 1, get the name let obj1 = {
 Last name: "高",
 Name: "Yuan Yuan",
 Name() {
  return this.surname + this.name;
 },
 age: 18
};

console.log("Requirement 1: " + obj1.Name()); //Gao Yuanyuan

// Requirement 2: The name can be obtained without brackets let obj2 = {
 Last name: "高",
 Name: "Yuan Yuan",
 getName() {
  return this.surname + this.name;
 },
 age: 18
};

console.log("Requirement 2: " + obj2.Name); //Gao Yuanyuan

// Requirement 3: The name can be written let obj3 = {
 Last name: "高",
 Name: "Yuan Yuan",
 getName() {
  return this.surname + this.name;
 },
 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.last name}, First name ${obj3.first name}`) // Gao Yuanyuan

var _xxx = 0
Object.defineProperty(obj3,'xxx',{
 get(){
  return _xxx
 },
 set(value){
  _xxx= value
 }
})

let data0 = {
 n: 0
}

let data1 = {}

Object.defineProperty(data1, 'n', {
 value: 0
})

console.log(`Requirement 1: ${data1.n}`) //Requirement 1: 0

let data2 = {}

data2._n = 0 // _n is used to secretly store the value of n, the default value is 0

Object.defineProperty(data2, 'n', {
 get(){
  return this._n
 },
 set(value){
  if(value < 0) return
  this._n = value
 }
})

console.log(`Requirement 2: ${data2.n}`)//0
data2.n = -1
console.log(`Requirement 2: ${data2.n} is set to -1 and fails`) //0 is set to -1 and fails data2.n = 1
console.log(`Requirement 2: ${data2.n} is set to 1 Success`) //0 is set to 1 Success

let data3 = proxy({ data:{n:0} }) // The parentheses are anonymous objects and cannot be accessed function proxy({data}){
 const obj = {}
 // The 'n' here is hardcoded. In theory, it should traverse all the keys of data. I have simplified it here // because I am afraid you can't understand 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(`Requirement 3: ${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 success`)

let myData = {n:0}
let data4 = proxy({ data:myData }) // The object in brackets is anonymous and cannot be accessed // data3 is obj
console.log(`Argumentative: ${data4.n}`) //0
myData.n = -1
console.log(`Argumentative: ${data4.n}, set to -1 failed!?`)

let myData5 = {n:0}
let data5 = proxy2({ data:myData5 }) // The parentheses are anonymous objects and cannot be accessed function proxy2({data}){
 // The 'n' here is hardcoded. In theory, we should traverse all the keys of data, but we simplify it here. let value = data.n //Save the starting n
 Object.defineProperty(data, 'n', {//Declare a new 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//This sentence is redundant data.n = value
  }
 })
 
 return obj // obj is the proxy}

// data3 is obj
console.log(`Requirement 5: ${data5.n}`) //0
myData5.n = -1
console.log(`Requirement 5: ${data5.n}, set to -1 failed`) //0
myData5.n = 1
console.log(`Requirement 5: ${data5.n}, set to 1 successfully`) //1