Vous apprendre étape par étape comment implémenter une liaison bidirectionnelle vue-Voir.js-php.cn

Comment implémenter la liaison bidirectionnelle dans vue ? Cet article vous apprendra étape par étape comment rédiger une reliure bidirectionnelle vue, afin que tout le monde puisse mieux comprendre la direction logique de la reliure bidirectionnelle. J'espère que cela sera utile à tout le monde !

Vous apprendre étape par étape comment implémenter une liaison bidirectionnelle vue

Cet article est principalement un processus d'écriture des pièges et de remplissage des pièges, permettant au public de mieux comprendre comment mettre en œuvre la liaison bidirectionnelle et la direction logique de la liaison bidirectionnelle. À ce stade, nous mettrons en œuvre une liaison bidirectionnelle. -liaison étape par étape. Il s'agit d'un article de didacticiel de classe. Tant que vous suivez l'article et observez attentivement chaque classe, ce n'est pas difficile à mettre en œuvre.

Démarrer

Démarrer Mage ? Amenez un chien ! !

Cela ne semble pas correct

Commencez avec une image

Vous apprendre étape par étape comment implémenter une liaison bidirectionnelle vue

Vous pouvez voir sur l'image que la nouvelle Vue() est divisée en deux étapesnew Vue()分为了两步走

代理监听所有数据，并与Dep进行关联，通过Dep通知订阅者进行视图更新。【相关推荐：vuejs视频教程】
解析所有模板，并将模板中所用到的数据进行订阅，并绑定一个更新函数，数据发生改变时Dep通知订阅者执行更新函数。

接下里就是分析如何去实现，并且都需要写什么，先看一段vue的基础代码，我们从头开始分析

<div id="app">
  <input v-model="message" />
  <p>{{message}}</p>
</div>

Copier après la connexion

let app = new Vue({
    el:"#app",
    data:{
      message:"测试这是一个内容"
    }
})

Copier après la connexion

从上面代码我们可以看到new Vue的操作，里面携带了el和data属性，这算是最基础的属性，而在html代码中我们知道<div id="app">是vue渲染的模板根节点，所以vue要渲染页面就要去实现一个模板解析的方法Compile类，解析方法中还需要去处理{{ }}和v-model两个指令，除了解析模板之后我们还需要去实现数据代理也就是实现Observer类

实现 Vue 类

如下代码所示，这就写完了Vue类，够简单吧，如果对class关键字不熟悉的，建议先去学习一下，从下面我们可能看到，这里实例化了两个类，一个是代理数据的类，一个是解析模板的类。

class Vue {
  constructor(options) {
    // 代理数据
    new Observer(options.data)
    // 绑定数据
    this.data = options.data
    // 解析模板
    new Compile(options.el, this)
  }
}

Copier après la connexion

接着往下我们先写一个Compile类用于解析模板，我们再来分析一波，解析模板要做什么事

我们要解析模板不可能直接对dom继续操作，所以我们要创建一个文档片段（虚拟dom），然后将模板DOM节点复制一份到虚拟DOM节点中，对虚拟DOM节点解析完成之后，再将虚拟DOM节点替换掉原来的DOM节点
虚拟节点复制出来之后，我们要遍历整个节点树进行解析，解析过程中会对DOM的atrr属性进行遍历找到Vue相关的指令，除此之外还要对 textContent节点内容进行解析，判断是否存在双花括号
将解析出来所用到的属性进行一个订阅

实现模板解析 Compile 类

下面我们将逐步实现

构建Compile类，先把静态节点和Vue实例获取出来，再定义一个虚拟dom的属性用来存储虚拟dom

class Compile {
  constructor(el, vm) {
    // 获取静态节点
    this.el = document.querySelector(el);
    // vue实例
    this.vm = vm 
    // 虚拟dom
    this.fragment = null 
    // 初始化方法
    this.init()
  }
}

Copier après la connexion

实现初始化方法init()，该方法主要是用于创建虚拟dom和调用解析模板的方法，解析完成之后再将DOM节点替换到页面中

class Compile { 
  //...省略其他代码

  init() {
    // 创建一个新的空白的文档片段（虚拟dom）
    this.fragment = document.createDocumentFragment()
  	// 遍历所有子节点加入到虚拟dom中
    Array.from(this.el.children).forEach(child => {
      this.fragment.appendChild(child)
    })
    // 解析模板
    this.parseTemplate(this.fragment)
    // 解析完成添加到页面
    this.el.appendChild(this.fragment);
  }
}

Copier après la connexion

实现解析模板方法parseTemplate，主要是遍历虚拟DOM中的所有子节点并进行解析，根据子节点类型进行不同的处理。

class Compile { 
  //...省略其他代码

  // 解析模板 
  parseTemplate(fragment) {
    // 获取虚拟DOM的子节点
    let childNodes = fragment.childNodes || []
    // 遍历节点
    childNodes.forEach((node) => {
      // 匹配大括号正则表达式 
      var reg = /\{\{(.*)\}\}/;
      // 获取节点文本
      var text = node.textContent;
      if (this.isElementNode(node)) { // 判断是否是html元素
        // 解析html元素
        this.parseHtml(node)
      } else if (this.isTextNode(node) && reg.test(text)) { //判断是否文本节点并带有双花括号
        // 解析文本
        this.parseText(node, reg.exec(text)[1])
      }

      // 递归解析，如果还有子元素则继续解析
      if (node.childNodes && node.childNodes.length != 0) {
        this.parseTemplate(node)
      }
    });
  }
}

Copier après la connexion

根据上面的代码我们得出需要实现两个简单的判断，也就是判断是否是html元素和文字元素，这里通过获取nodeType的值来进行区分，不了解的可以直接看一下传送门：Node.nodeType，这里还扩展了一个isVueTag方法，用于后面的代码中使用

class Compile { 
  //...省略其他代码

	// 判断是否携带 v-
  isVueTag(attrName) {
    return attrName.indexOf("v-") == 0
  }
  // 判断是否是html元素
  isElementNode(node) {
    return node.nodeType == 1;
  }
  // 判断是否是文字元素
  isTextNode(node) {
    return node.nodeType == 3;
  }
}

Copier après la connexion

实现parseHtml
- L'agent écoute toutes les données et s'associe à Dep, et informe les abonnés des mises à jour de vue via Dep. [Recommandations associées : tutoriel vidéo vuejs🎜]🎜
🎜L'étape suivante consiste à analyser comment l'implémenter et ce qui doit être écrit. Examinons d'abord un morceau de code de base de vue. Analysons-le depuis le début🎜
```
class Compile {
  //...省略其他代码

  // 解析html
  parseHtml(node) {
    // 获取元素属性集合
    let nodeAttrs = node.attributes || []
    // 元素属性集合不是数组，所以这里要转成数组之后再遍历
    Array.from(nodeAttrs).forEach((attr) => {
      // 获取属性名称
      let arrtName = attr.name;
      // 判断名称是否带有 v- 
      if (this.isVueTag(arrtName)) {
        // 获取属性值
        let exp = attr.value;
        //切割 v- 之后的字符串
        let tag = arrtName.substring(2);
        if (tag == "model") {
          // v-model 指令处理方法
          this.modelCommand(node, exp, tag)
        }
      }
    });
  }
}
```
Copier après la connexion
Copier après la connexion
```
class Compile {
	//...省略其他代码
  
   // 处理model指令
  modelCommand(node, exp) {
    // 获取数据
    let val = this.vm.data[exp]
    // 解析时绑定数据
    node.value = val || ""

    // 监听input事件
    node.addEventListener("input", (event) => {
      let newVlaue = event.target.value;
      if (val != newVlaue) {
        // 更新data数据
        this.vm.data[exp] = newVlaue
        // 更新闭包数据，避免双向绑定失效
        val = newVlaue
      }
    })
  }
}
```
Copier après la connexion
Copier après la connexion
🎜À partir de ce qui précède. code que nous pouvons voir Le fonctionnement du nouveau Vue porte les attributs el et data, qui sont les attributs les plus basiques que nous avons dans le code html. sachez que < div id="app"> est le nœud racine du modèle rendu par vue, donc pour que vue restitue la page, il doit implémenter une méthode d'analyse de modèle Compile< /code>, et la méthode d'analyse doit également Pour traiter les deux instructions <code>{{ }} et v-model, en plus d'analyser le modèle, nous avons également besoin pour implémenter l'agent de données, qui doit implémenter la classe Observer 🎜🎜Implement Vue class🎜🎜Comme le montre le code suivant, cela complète la Vue</ code>. C'est assez simple. Si vous ne connaissez pas le mot-clé <code>class. Si vous le connaissez, il est recommandé de l'apprendre d'abord. Ce qui suit montre qu'il existe deux classes. instanciée ici, l'une est la classe de données proxy et l'autre est la classe de modèle d'analyse. 🎜
```
class Compile {
	//...省略其他代码
  
  //解析文本
  parseText(node, exp) {
    let val = this.vm.data[exp]
    // 解析更新文本
    node.textContent = val || ""
  }
}
```
Copier après la connexion
Copier après la connexion
🎜 Ensuite, écrivons une classe Compile pour analyser le modèle. Analysons-le à nouveau et voyons ce qui doit être fait pour analyser le modèle🎜
- 🎜Si nous voulons analyser le modèle, il est impossible de continuer à opérer directement sur le DOM, nous devons donc créer un fragment de document (DOM virtuel), puis copier le nœud DOM du modèle sur le nœud DOM virtuel. , et terminez l'analyse du nœud DOM virtuel. Après cela, remplacez le nœud DOM d'origine par le nœud DOM virtuel🎜
- 🎜Une fois le nœud virtuel copié, nous devons parcourir toute l'arborescence des nœuds pour l'analyse. . Pendant le processus d'analyse, l'attribut atrr du DOM sera parcouru pour trouver les instructions liées à Vue, en plus d'analyser le contenu du nœud textContent pour déterminer s'il y a des doubles accolades🎜
- 🎜abonnez-vous aux attributs analysés🎜
🎜Implémentez la classe Compile d'analyse du modèle🎜🎜Nous l'implémenterons étape par étape ci-dessous🎜
- 🎜Construisez la classe Compile, obtenez d'abord le nœud statique et l'instance Vue, puis définissez un attribut de dom virtuel pour stocker le dom virtuel🎜
```
// 监听者
class Observer {
  constructor(data) {
    this.observe(data)
  }
  // 递归方法
  observe(data) {
    //判断数据如果为空并且不是object类型则返回空字符串
    if (!data || typeof data != "object") {
      return ""
    } else {
      //遍历data进行数据代理
      Object.keys(data).forEach(key => {
        this.defineReactive(data, key, data[key])
      })
    }
  }

  // 代理方法
  defineReactive(data, key, val) {
    // 递归子属性
    this.observe(data[key])
    Object.defineProperty(data, key, {
      configurable: true,  //可配置的属性
      enumerable: true, //可遍历的属性
      get() {
        return val
      },
      set(newValue) {
        val = newValue
      }
    })
  }
}
```
Copier après la connexion
Copier après la connexion