Table of Contents
{{name}}
Home Web Front-end Vue.js A brief analysis of the two-way binding principle of complie data in Vue (detailed code explanation)

A brief analysis of the two-way binding principle of complie data in Vue (detailed code explanation)

Aug 23, 2021 am 10:29 AM
javascript vue

之前的文章《一文了解vue中watcher数据双向绑定原理(附代码)》中,给大家介绍了解了vue中complie数据双向绑定原理。下面本篇文章给大家了解vue中complie数据双向绑定原理,伙伴们过来看看吧。

A brief analysis of the two-way binding principle of complie data in Vue (detailed code explanation)

vue数据双向绑定原理,和简单的实现,本文将实现mvvm的模板指令解析器

A brief analysis of the two-way binding principle of complie data in Vue (detailed code explanation)

1)vue数据双向绑定原理-observer

2)vue数据双向绑定原理-wather

3)vue数据双向绑定原理-解析器 Complie

vue数据双向绑定原理,和简单的实现,本文将实现mvvm的模板指令解析器

上一步实现了简单数据绑定,最后实现解析器,来解析v-model,v-on:click等指令,和{{}}模板数据。解析器Compile实现步骤:

  • 解析模板指令,并替换模板数据,初始化视图

  • 将模板指令对应的节点绑定对应的更新函数,初始化相应的订阅器

为了解析模板,首先需要获取到dom元素,然后对含有dom元素上含有指令的节点进行处理,因此这个环节需要对dom操作比较频繁,所有可以先建一个fragment片段,将需要解析的dom节点存入fragment片段里再进行处理:

function node2Fragment(el) {
  var fragment = document.createDocumentFragment(),
    child;
  // 将原生节点拷贝到fragment
  while ((child = el.firstChild)) {
    fragment.appendChild(child);
  }

  return fragment;
}
Copy after login

接下来渲染'{{}}'模板

//Compile
function Compile(el, vm) {
  this.$vm = vm;
  this.$el = this.isElementNode(el) ? el : document.querySelector(el);
  if (this.$el) {
    this.$fragment = this.node2Fragment(this.$el);
    this.init();
    this.$el.appendChild(this.$fragment);
  }
}

Compile.prototype = {
  init: function () {
    this.compileElement(this.$fragment);
  },

  node2Fragment: function (el) {
    //...
  },

  //编译模板
  compileElement: function (el) {
    var childNodes = el.childNodes,
      self = this;
    [].slice.call(childNodes).forEach(function (node) {
      var text = node.textContent;
      var reg = /{{(.*)}}/; //表达式文本
      //按元素节点方式编译
      if (self.isElementNode(node)) {
        self.compile(node);
      } else if (self.isTextNode(node) && reg.test(text)) {
        self.compileText(node, RegExp.$1);
      }
      //遍历编译子节点
      if (node.childNodes && node.childNodes.length) {
        self.compileElement(node);
      }
    });
  },

  isElementNode: function (node) {
    return node.nodeType == 1;
  },

  isTextNode: function (node) {
    return node.nodeType == 3;
  },

  compileText: function (node, exp) {
    var self = this;
    var initText = this.$vm[exp];
    this.updateText(node, initText);
    new Watcher(this.$vm, exp, function (value) {
      self.updateText(node, value);
    });
  },

  updateText: function (node, value) {
    node.textContent = typeof value == "undefined" ? "" : value;
  },
};
Copy after login

处理解析指令对相关指令进行函数绑定。

Compile.prototype = {

  ......
  isDirective: function(attr) {
    return attr.indexOf('v-') == 0;
  },

  isEventDirective: function(dir) {
    return dir.indexOf('on:') === 0;
  },

  //处理v-指令
  compile: function(node) {

    var nodeAttrs = node.attributes,
      self = this;
    [].slice.call(nodeAttrs).forEach(function(attr) {
      // 规定:指令以 v-xxx 命名
      // 如 <span v-text="content"></span> 中指令为 v-text
      var attrName = attr.name; // v-text
      if (self.isDirective(attrName)) {
        var exp = attr.value; // content
        var dir = attrName.substring(2); // text
        if (self.isEventDirective(dir)) {
          // 事件指令, 如 v-on:click
          self.compileEvent(node, self.$vm, exp, dir);
        } else {
          // 普通指令如:v-model, v-html, 当前只处理v-model
          self.compileModel(node, self.$vm, exp, dir);
        }
        //处理完毕要干掉 v-on:, v-model 等元素属性
        node.removeAttribute(attrName)
      }
    });

  },

  compileEvent: function(node, vm, exp, dir) {

    var eventType = dir.split(&#39;:&#39;)[1];
    var cb = vm.$options.methods && vm.$options.methods[exp];
    if (eventType && cb) {
      node.addEventListener(eventType, cb.bind(vm), false);
    }

  },

  compileModel: function(node, vm, exp, dir) {

    var self = this;
    var val = this.$vm[exp];
    this.updaterModel(node, val);
    new Watcher(this.$vm, exp, function(value) {
      self.updaterModel(node, value);
    });
    node.addEventListener(&#39;input&#39;, function(e) {
      var newValue = e.target.value;
      if (val === newValue) {
        return;
      }
      self.$vm[exp] = newValue;
      val = newValue;
    });

  },

  updaterModel: function(node, value, oldValue) {
    node.value = typeof value == &#39;undefined&#39; ? &#39;&#39; : value;
  },

}
Copy after login

最后再关联起来

function Vue(options) {
  .....
  observe(this.data, this);
  this.$compile = new Compile(options.el || document.body, this)
  return this;

}
Copy after login

来尝试下效果

<!--html-->
<div id="app">
  <h2 id="name">{{name}}</h2>
  <input v-model="name" />
  <h1 id="name">{{name}}</h1>
  <button v-on:click="test">click here!</button>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      name: "chuchur",
      age: 29,
    },
    methods: {
      test() {
        this.name = "My name is chuchur";
      },
    },
  });
</script>
Copy after login

OK. 基本完善了

推荐学习:vue.js教程

The above is the detailed content of A brief analysis of the two-way binding principle of complie data in Vue (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Two Point Museum: All Exhibits And Where To Find Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use echarts in vue How to use echarts in vue May 09, 2024 pm 04:24 PM

Using ECharts in Vue makes it easy to add data visualization capabilities to your application. Specific steps include: installing ECharts and Vue ECharts packages, introducing ECharts, creating chart components, configuring options, using chart components, making charts responsive to Vue data, adding interactive features, and using advanced usage.

The role of export default in vue The role of export default in vue May 09, 2024 pm 06:48 PM

Question: What is the role of export default in Vue? Detailed description: export default defines the default export of the component. When importing, components are automatically imported. Simplify the import process, improve clarity and prevent conflicts. Commonly used for exporting individual components, using both named and default exports, and registering global components.

How to use map function in vue How to use map function in vue May 09, 2024 pm 06:54 PM

The Vue.js map function is a built-in higher-order function that creates a new array where each element is the transformed result of each element in the original array. The syntax is map(callbackFn), where callbackFn receives each element in the array as the first argument, optionally the index as the second argument, and returns a value. The map function does not change the original array.

What are hooks in vue What are hooks in vue May 09, 2024 pm 06:33 PM

Vue hooks are callback functions that perform actions on specific events or lifecycle stages. They include life cycle hooks (such as beforeCreate, mounted, beforeDestroy), event handling hooks (such as click, input, keydown) and custom hooks. Hooks enhance component control, respond to component life cycles, handle user interactions and improve component reusability. To use hooks, just define the hook function, execute the logic and return an optional value.

Promise usage in vue Promise usage in vue May 09, 2024 pm 03:27 PM

Promise can be used to handle asynchronous operations in Vue.js. The steps include: creating a Promise object, performing an asynchronous operation and calling resolve or reject based on the result, and processing the Promise result (use .then() to handle success, .catch() to handle errors) . Advantages of Promises include readability, ease of debugging, and composability.

validator method in vue validator method in vue May 09, 2024 pm 04:09 PM

The Validator method is the built-in validation method of Vue.js and is used to write custom form validation rules. The usage steps include: importing the Validator library; creating validation rules; instantiating Validator; adding validation rules; validating input; and obtaining validation results.

How to disable the change event in vue How to disable the change event in vue May 09, 2024 pm 07:21 PM

In Vue, the change event can be disabled in the following five ways: use the .disabled modifier to set the disabled element attribute using the v-on directive and preventDefault using the methods attribute and disableChange using the v-bind directive and :disabled

How to isolate styles in components in vue How to isolate styles in components in vue May 09, 2024 pm 03:57 PM

Style isolation in Vue components can be achieved in four ways: Use scoped styles to create isolated scopes. Use CSS Modules to generate CSS files with unique class names. Organize class names using BEM conventions to maintain modularity and reusability. In rare cases, it is possible to inject styles directly into the component, but this is not recommended.

See all articles