This is the 11th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Based on the data responsive implementation mentioned above, this time we upgrade again to simulate the VUE framework and implement the responsive data rendering into the page.

4. Original use of Vue:Let’s write a simplified version of our own DVue.

According to theFrom design concepts to data responseIn this article, we will first implement the data in the response data acquisition.

Data brokers

As can be seen from the picture, data in data can be obtained by new a Vue instance. The access format is vm.name. First, create your own DVue file and introduce it in your page. The following code related to logical operations is in DVue. We need to create a DVue class that takes the parameters passed in through the constructor. Intercepts and listens to data in data internally. But when we access vm.name, there is no output (undefined). This is because we are only doing response interception on THE DVue, not proxying it.

class DVue {
  constructor(options) {
    this.$options = options
    this.$data = options.data
    console.log(this.$data)
    observe(this.$data)
    proxy(this) / / agent}}Copy the code

Then we need to implement the function of the agent. $data (object.keys), proxying them to the instance. Its data must also be responsive.

function proxy(vm) {
  Object.keys(vm.$data).forEach((key) = > {
    Object.defineProperty(vm, key, {
      get() {
        return vm.$data[key]
      },
      set(newVal) {
        if(newVal ! = vm.$data[key]) vm.$data[key] = newVal }, }) }) }Copy the code

Compile reactive data

Of course, that’s what happens when nothing is written…Today we’re going to replace the data on the page.

Now that we’ve done the data response and proxy, we’re ready for another important step: compile!

For those of you who have seen the principle, Compile is the class responsible for compiling. The DVue class executes the Compile(new Compile(options.el, this)), passing in the current DOM and instance.

class Compile {
  constructor(el, vm) {
    this.$vm = vm
    let dom = document.querySelector(el)
    this.compiler(dom)
  }
  compiler(el) {
    const childNodes = el.childNodes
    childNodes.forEach((node) = > {
      if (isNode(node)) {  / / element
        if (node.childNodes.length > 0) this.compiler(node)
      } else if (isTextNode(node)) {  / / text
        console.log('Compiled interpolation', node.textContent, this.$vm[RegExp.$1])
        this.compileText(node)
      }
    })
  }
  compileText(node) {
    node.textContent = this.$vm[RegExp. $1]}}function isNode(el) {
  return el.nodeType === 1
}
const defaultTagRE = / \ {\ {((? :.|\r? \n)+?) \} \} / / / {{value}}
function isTextNode(el) {
  return el.nodeType === 3 && defaultTagRE.test(el.textContent)
}
Copy the code

In Compile, loop through the child nodes under #app. There may be cases where the child node is text or an element, so we need to separate the two cases.

• Text node. Simply replace the textContent property of the node.
• Element node. There may be the possibility that elements are nested within elements. So we need to determine the number of child elements of the current element node (node.childnodes.length > 1), if there are any. You need to recursively parse it in the lower layer.

One of the things that might be a little bit difficult to understand here is re. I’m not particularly familiar with this, but here I’m referring to the regular source code that gets the {{value}} value. Of course, the source code uses the exec method for matching judgment. Specific exec method use can refer to here. Sometimes using the exec method is not immediately effective, need to manually restart the following, with a certain latency.

Together with the previous article, we have completed the two modules shown above: the data hijacking of the Observer and the initialization view of Compile.

The simple data is displayed on the page and then the pull is complete. For starters, check out the Vue source code for a plump item (●’ extract ‘●). If not enough, please advise.