Vue data responsiveness summary

Before talking about data responsiveness, we need to solve a very important problem, which is what exactly does Vue do with data? Let's start with getters and setters, which we use to read and write virtual properties.

Getters and setters

There is the following code

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

At this time, the result we logged out is Gao Yuanyuan, which everyone can understand, but can the brackets after the name be deleted? No, because it is a function, so how do we remove the parentheses? Here are our requirements

// 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

At this time we use getter, and we can get the value without brackets. So how do we change the name?

// 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

Where there is get, there is set, and that's how setter is used. We use the attribute value = xxx to trigger the set function, and the name can be written. However, if we type console.log(obj3) in requirement 3, we will get the following figure:

Why is姓名:(...) displayed as shown in the picture? This is actually a get set. When the browser displays the name, it prints out姓名:(...) . This shows that we can read and write the name in requirement three, but there is no attribute called name. Instead, there are get and set to simulate the operation on the name.

Object.defineProperty

In the above example, we use get and set directly when defining the object, but if the object has been declared, how do we continue to add get? We need to use Object.defineProperty , or requirement three. We can add get and set after the definition by adding the following code:

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

Next we can solve the initial problem: what exactly does Vue do with data? Let’s take a look at a few examples:

let data0 = {
 n: 0
}

First declare a data0, requirement 1: define n using Object.defineProperty :

let data1 = {}

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

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

Requirement 2: n cannot be less than 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

But what if the other party uses data2._n directly? Can we not expose anything accessible on the object? At this time we have to use a proxy:

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`)

But what if you don’t want to use an agent?

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!?`)

Now myData can still be modified in this way, so we have another requirement: even if the user modifies myData without authorization, we must intercept it:

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
  }
 })

Just add the above sentences, these sentences will monitor data

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

When we write vm = new Vue({data:myData}) , Vue does two things:

Let vm be the proxy of myData, and you can access vm through this
All properties of myData will be monitored to prevent the properties of myData from changing without the vm knowing. Once the property changes, render(data) can be called and the UI can be automatically refreshed.

Then we can go back to the title, what is data responsiveness? An object is responsive if it can react to external stimuli. Vue's data is responsive. In const vm = new Vue({data:{n:0}}) , if vm.n is modified, n in the UI will be updated accordingly. Vue implements data responsiveness through Object.defineProperty .
What are responsive web pages? That is, if you change the size of the window, the content of the web page will change accordingly, then this web page is called a responsive web page.

The above is the detailed summary of Vue data responsiveness. For more information about Vue data responsiveness, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: