Writing in the front

Vue and React can be said to be the big killer that changed the front end pattern in recent years. The emergence of these more advanced frameworks greatly promoted the progress of front end engineering and enabled the front end to complete business development in a faster and more standardized manner. Following the persistent belief of the underlying architects — keep the complexity to themselves, whether it is Vue or React, framework developers have encapsulated and optimized the most complicated parts of the front end, leaving the simplicity to others. In day-to-day coding, we gradually got used to updating Dom by modifying a value in data, until an intern asked you, “Why does Dom update when I modify the value in data?” “, you say to her with firm eyes and deep tone, “Well, that’s right, just remember!” Speaking of which, why don’t you come to me to understand the principle of Vue view update? Think of the intern behind you who is still taking the opportunity to ask you, if the depth is not good, why don’t we secretly roll?

Tip:This is a low version, the full version has been updated –>Vue Response Principle [Full version]

Vue view update mechanism

Implement responsive core API: Object.defineProperty

DefineProperty: mdN-object.defineProperty

// Simulate data in Vue
const data = {}
// Internal variables that are not visible to the outside world
let _myName = 'Yimwu'
// Listen for name in data in response
Object.defineProperty(data, "name", {
    // When data.name is used, the get method is called and returns the value of the internal storage variable
    get: () = > {
      console.log('get')
      return _myName
    },
    // When a variable is modified with data.name = XXX, the set method is called to set the value of the internal stored variable
    set: (newVal) = > {
      console.log('set')
      _myName = newVal
    }
})
console.log(data.name) // Print Yimwu get
data.name = 'Mr.Wu' // set (listen successfully)
Copy the code

Handwriting view update

This is the same basic use of Object.defineProperty as above, with a slight extension that listens for every attribute of the Object and uses closures to store changed values

// Verify that the update is triggered
function updateView(){
  console.log('View Update')}// Redefine attributes to listen
function defineReactive(target, key, value){
  Object.defineProperty(target, key, {
    get(){
      return value
    },
    set(newVal){
      // Value is always in the closure. After this is set, the next get will get the latest value
      // There is a small optimization, if the same will not trigger the update
      if(newVal ! == value){ value = newVal// Trigger the update
        updateView()
      }
    }
  })
}

// Listen for object properties
function observe(target){
  if(typeoftarget ! = ='object' || target === null) {
    // It is not arrays or objects that are not suitable for listening
    return target
  }
  // Redefine the attributes of the object with defineProperty
  for(let key in target) {
    defineReactive(target, key, target[key])
  }
}

// Prepare data
const data = {
  name: 'Yimwu'.id: 001.information: {
    tel: '135xxxxx354'.email: '[email protected]'}}// Listen for data
observe(data)

/ / test
data.name = 'YI' // (listen successfully) output --> Data update
data.age = { num: 21} (listen successfully) output --> data update data.information.tel ='13456xxx234' // (listening failed)
data.age.num = 110 // (listening failed)
Copy the code

Optimized depth monitoring

// Redefine attributes to listen
function defineReactive(target, key, value){
  // Call observe deep again with value. If it is an object, listen further. If it is not value, return
  observe(value)
  Object.defineProperty(target, key, {
    get(){
      return value
    },
    set(newVal){
      Id = {num: 101}; // The num can be listened to as well
      observe(newVal)
      // Value is always in the closure. After this is set, the next get will get the latest value
      if(newVal ! == value){ value = newVal// Trigger the update
        updateView()
      }
    }
  })
}
// Prepare data
const data = {
  name: 'Yimwu'.id: 001.information: {
    tel: '135xxxxx354'.email: '[email protected]'}}// Listen for data
observe(data)

/ / test
data.name = 'YI' // (listen successfully) output --> Data update
data.id = { num: 010 } // (listen successfully) output --> Data update
data.id.num = 110 // (listen successfully) output --> Data update
data.information.tel = '00000000000'Output --> Data updateCopy the code

conclusion

At this point, a simple basic implementation of data listening, basically can do the object of each attribute of the depth of listening, but this is not the final version, the rest of the optimization and performance analysis left to the next article for elaboration! Welcome to continue to follow the blogger updates!

Write in the last

The blogger will continue to update good articles, welcome to follow the blogger yo!! If the article is helpful to you, please click like, collect + attention and grow up with the blogger!! ❤ ❤ ❤