浅谈Vue中Vnode与Dom的关系, vnode与dom相互融合

在项目中, 咱们会遇到将Vnode或者component渲染到指定的dom中. 这时候, 咱们可能须要去研究Vue中的源码, 会有如何建立Vnode? 如何渲染Vnode?等相关的疑问. 今天咱们不研究源码, 咱们从实际实践中来看看实现的方式.

首先, 在vue中咱们一般是经过建立一个Vue实例对象或者建立Vue后经过$mount来挂载到一个Dom元素上,完成Vue项目的渲染.

import Vue from "vue";
import App from "../app.vue";

new Vue({
  el: "#app",
  render: h => h(App)
})
复制代码

或者

import Vue from "vue";
import App from "../app.vue";

new Vue({
  render: h => h(App)
}).$mount("#app")
复制代码

基于这个咱们会想, 是否是再建立一个Vue实例来挂载到另一个指定的Dom中呢?

<div id="app"></div>
<div id="app2"></div>
复制代码

new Vue({
   render: h => h(App)
}).$mount("#app")

new Vue({
  render: h => h(App)
}).$mount("#app2")
复制代码

效果:

其实这种想法是可行的, 可是不合理, 咱们不可能每遇到这种状况就这样处理吧. 按照习惯, 咱们建立一个Vue就相似建立了一个应用程序/app. 那有没有其余办法呢?

办法固然是有的, 这一次, 咱们结合虚拟dom和dom的关系来作这一次思考. 虚拟dom其实就是一个标签的语法树, 经过这棵树经过patch函数建立相关的标签, 渲染到root Dom. 语法树上的数据有所变化, 则会更新数据相关的dom标签. 也就是说数据对应标签, 数据变化, 标签内容也会变化, 他们是对应的. 基于这一个想法, 咱们来完成一个简单的实例.

实例说明:

目的: 经过dom来建立本身的组件, 而后将组件融入到Vue组件中, 实现互相通讯.

步骤:

1. 咱们先建立基本的Hello Vue组件.

export default {
  data() {
    return {
      dom: null
    }
  },
  render(create) {
    return create('div', {}, [this.$slots.click, this.$slots.body])
  }
}
复制代码

在App.vue中加入Hello代码, hello中的slot设定了一个按钮, 按钮拥有点击事件, 事件是改变slot body中的内容.

<template>
   <section>
       <h3>{{message}}</h3>
       <hello>
          <button slot="click" @click="random">点击我</button>
          <div slot="body">我是内容: {{content}}</div>
       </hello>
   </section>
</template>

<script>
  import Hello from './hello';
   export default {
      components: {Hello},
      data() {
         return {
           content: '',
           message: "Hello Vuejs"
         }
      },
      methods: {
         random() {
            this.content = new Date();
         }
      }
   }
</script>
复制代码

效果:

只要点击按钮就会改变内容.

这样一个基本的组件就完成了, 可是他仍是纯粹的一个vue功能的组件. 咱们须要加入实际DOM的功能. 那咱们继续跟进. 在Hello组件中加入一个建立的DOM功能. 这个dom展现在右上角.

function DomDemo(){
  this.root = document.createElement("div");
  this.body = document.createElement('div');
  this.root.appendChild(this.body); 

  this.root.className = "domdemo";

  this.setContent = function(html) {
     this.body.innerHTML = html;
  }
  document.body.appendChild(this.root);
}


export default {
  mounted() {
    this.dom = new DomDemo();
    console.log(this.dom)
  },
  data() {
    return {
      dom: null
    }
  },
  render(create) {
    return create('div', {}, [this.$slots.click, this.$slots.body])
  }
}
复制代码

固然他们尚未直接的关系, 这里咱们须要将hello组件中的slot body 的内容放入到dom中. 而后点击按钮, dom中的内容也会改变, 这也就实现了响应式. vue组件和dom组件实现了交互. 那如何处理呢? 咱们修改一下Hello组件代码.

function DomDemo(){
  this.root = document.createElement("div");
  this.body = document.createElement('div');
  this.root.appendChild(this.body); 

  this.root.className = "domdemo";

  this.vnodeToElment = function(nodes) {
    if(!nodes) return [];
    const elements = [];
    nodes.forEach(node => {
      elements.push(node.elm);
    });
    return elements;
  }

  this.setContent = function(nodes) {
     this.body.innerHTML = '';
     this.vnodeToElment(nodes).forEach(item => {
       this.body.appendChild(item);
     })
  }
  document.body.appendChild(this.root);
}


export default {
   
  mounted() {
    this.dom = new DomDemo();
    this.dom.setContent(this.$slots.body);
  },
  data() {
    return {
      dom: null
    }
  },
  render(create) {
    return create('div', {}, [this.$slots.click, this.$slots.body])
  }
}
复制代码

这样咱们的内容就到了dom中, 点击vue组件中的按钮, dom中的内容也会改变了: 首先将vue虚拟dom渲染到界面中, 再移动元素到dom中, 这样就完成了整个效果. 其实本质仍是引用的问题, 内存地址的关系.

这个例子有什么做用呢? 其实用处仍是蛮大的. 好比咱们开发的时候, 须要引入dom相关的组件, 好比popover等, 均可以使用这种方式.

总结

从Vue实例对象挂载到DOM, 再到实例对象中的VNODE挂载到指定的dom中, 来实现咱们业务须要的功能, 也方便挂载dom相关的组件. 咱们须要知道Vue的渲染过程, 在不去看源码的时候, 多思考, 多设想在渲染过程当中会作什么样的处理. 以及咱们应该如何应对, 巧妙的融合起来. 这里咱们也须要把基础打牢固, 了解引用的本质.