浅谈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的渲染过程, 在不去看源码的时候, 多思考, 多设想在渲染过程中会做什么样的处理. 以及我们应该如何应对, 巧妙的融合起来. 这里我们也需要把基础打牢固, 了解引用的本质.

转载于:https://juejin.im/post/5c8ee85ee51d4542105ff5f7