This is the 24th day of my participation in the August More Text Challenge

This series also does not have any tricks, is to complete the usual interview some handwriting functions, test these simple implementation of the advantage is that you can see the basic coding level, and take a short time, a more comprehensive view of your code strength. Generally, there are not many boundary conditions, so that the interview time is not enough, the investigation is not comprehensive.

If you don’t know or are not clear about the API, just ask the interviewer directly, how to use the API under Google anyone can immediately understand the knowledge also can’t see the level. The key is in the implementation process, and your coding status, habits, clarity of thought and so on.

Note that it is a simple implementation, not a complete implementation. It is important to have a clear concept and clear implementation idea. It is suggested to explain the concept clearly first => write use cases => write pseudocode => implement specific functions, and then optimize step by step.

Simple handwriting Vue2. X response type principle

Analysis of the

First of all, the responsive principle, if you look at the official documentation, is very clear, this is a very good picture

The basic principle is:

Each component instance corresponds to a Watcher instance, which records “touched” data properties as dependencies during component rendering. Watcher is then notified when the setter for the dependency fires, causing its associated component to be re-rendered.

Of course, vue2. X has the following two points to note

• Vue cannot detect the addition or removal of property. Since Vue performs getter/setter conversions on property when it initializes the instance, the property must exist on the data object for Vue to convert it to reactive.

  • However, it can be usedVue.set(object, propertyName, value)Method to add a responsive property to a nested object.

• Vue cannot detect changes to the following arrays:

  • When you set an array item directly using an index, for example:vm.items[indexOfItem] = newValue
  • When you modify the length of an array, for example:vm.items.length = newLength
  • You can use it toovm.$setInstance method,vm.$set(vm.items, indexOfItem, newValue)To deal with

So what should we think about when we write a basic responsive demo?

According to the above principle, it is decomposed into these pieces:

• Observer
• Watcher
• Dep

In fact, if you figure out what these pieces are, and how they relate to each other, you’ll basically understand the response.

• First, the Observer iterates through the data in the component and makes it reactive through the defineReactive method, which hijacks the data. So that the operation can be done every time the value (get) and the value (set) are set.

• Watcher Each component instance corresponds to a Watcher instance, and Watcher is responsible for rendering and updating views (gray flat arrow to left)

  • Watcher is divided into types
    • viewdatathewatcher 是 renderWatcher.
    • Calculate attributeComputed 的watcher 是 computedWatcher.
    • User-definedwatchIn the optionswatcher 叫 userWatcher

• The Dep relies on the collector. We learned that the Observer listens for data changes, Watcher updates the view, and Dep is the bridge between the Observer and Watcher

  1. Record rendering by Watcher
  2. Notifies the previously remembered Watcher to update the view when it is listening for data changes

With this in mind, it is also recommended to take a look at the previous handwritten implementation of the Observer pattern

Handwritten implementation

Let’s go straight to the code and implement it piece by piece

function Observer(data) {
  if(! data ||typeofdata ! ='object') return
  for (let key indata) { defineReactive(data, key); }}const defineReactive = function(obj, key) {
  let val = obj[key];
  // If there are nested objects in data, recursive deep listening is required
  Observer(val)
  // Rely on the collector instance
  const dep = new Dep();

  Object.defineProperty(obj, key, {
    enumerable: true.configurable: true.get() {
      console.log('get val');
      // The template attributes are evaluated to trigger dependency collection
      if (target) {
        dep.addSub(target)
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) {
        return;
      }
      console.log('set val')
      val = newVal;
      // Depending on the collector to notify each Watcher that needs to be updated to update the view update() when the value changes,
      // All the dependencies in dep.subsdep.notify(); }}); }Copy the code

The Observer listens that we are done, and now parses the code template, relying on the collection process for {{}} or computed.

// As the message center of the observer, decouple attribute dependencies and update operations
class Dep {
  constructor() {
    this.subs = []
  }
  // Put the corresponding watcher in the subs of the dependent collector
  addSub(watcher) {
    this.subs.push(watcher)
  }
  // Notify all watchers in subs to update the view
  notify() {
    this.subs.forEach(watcher= > {
      watcher.update()
    })
  }
}

// Global property to configure watcher
target = null

class Watcher {
  constructor(obj, key) {
    // Point target at yourself
    target = this
    this.obj = obj
    this.key = key
    this.value = obj[key]
    // Finally empty target
    // This is to prevent notify from binding Watcher and Dep continuously
    target = null
  }

  update() {
    this.value = this.obj[this.key]
    this.divChange(this.value)
  }

  // Update the view and change the DOM
  divChange(value) {
    document.querySelector('div').innerText = value
  }
}

var data = { name: 'keal' }

// Of course the Vue framework does all this for you
Observer(data)
new Watcher(data, 'name')

// Now you can change data.name to be reactive
data.name = 'neverMore'

// You can open Baidu, open devTool copy code to run
Copy the code

That’s all for today.

In addition, we recommend another series of articles, very simple, on the front of the advanced students are very effective, wall crack recommended!! Core concepts and algorithms disassembly series remember to like ha

If you want to brush the questions with me, you can add me on wechat. Click here to make a friend Or search my wechat account, infinity_9368. You can chat with me and add my secret code “Tianwang Gaidihu”. Verify the message please send me Presious tower shock the rever Monster, I see it through, after adding I will do my best to help you, but pay attention to the way of asking questions, it is suggested to read this article: the wisdom of asking questions

reference

• Vue document
• The path to the interview