在项目中, 我们会遇到将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组件中, 实现互相通信.
步骤:
- 我们先创建基本的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的渲染过程, 在不去看源码的时候, 多思考, 多设想在渲染过程中会做什么样的处理. 以及我们应该如何应对, 巧妙的融合起来. 这里我们也需要把基础打牢固, 了解引用的本质.