虚拟DOM技术（1）

VDOM的第一个目的：完成在Vue下实现DOM操作的功能。
VDOM的第二个目的：实现比原生的DOM操作还要快的页面渲染机制。
VDOM的本质：利用js对象模拟DOM节点。

一、利用render函数代替组建中的template

render函数的功能：在创建组件是实现DOM结构的生产，和template完全一致。

格式：

Vue.component('my-com',{render:function(creatElement){return creatElement('div');}
})
//相当于：template:`<div></div>`

简化格式：

Vue.component('my-com',{render:h=>h('p')
})

创建一个带有文本内容的VDOM节点
<div>我今天学习了虚拟DOM技术</div>
```
Vue.component('my-com',{render:h=>h('div','我今天学习了虚拟DOM技术')
})
```
创建一个VDOM节点
带有名为box的类名，内联样式规定了宽度、高度、背景颜色，具备id属性和title属性。能够为这个VDOM节点绑定鼠标经过和鼠标离开事件。
<div class="box" style="width:50px;height:50px;background-color:red" id="" title="" onmouseover="" onmousemove=""></div>
解决方案：使用h()函数的第二个参数，参数类型为{}。
格式：
render:h=>h('tagName,{
class:{//为VDOM节点设置类名},
style:{//为VDOM节点设置内联样式},
attrs:{//为VDOM节点设置HTML属性},
on:{//为VDOM节点绑定事件},
domProps:{//为VDOM节点设置JavaScript中的节点属性}
})

例如：
```
render:h=>h('div',{class:{box:true},style:{width:'50px',height:'50px',backgroundColor:'#3385ff'},attrs:{id:'box',title:'鼠标经过显示文本'},on:{mouseover:()=>event.target.style.backgroundColor = '#ff5857',mouseout:()=>event.target.style.backgroundColor = "#3385ff"},domProps:{innerText:'我是通过h函数生成的VDOM节点',contentEditable:true}
})
```
1. 创建一个带有子节点的VDOM节点：
  格式：h('div',[h(),h()])
  例如：
```
render:h=>h('div',{class:{box:true}},[h('h1','我是一级标题'),h('p','我是一个段落'),h('a',{attrs:{href:'#'}},'百度百科')])
```

二、根据现有的组件创建VDOM节点：

例一：根据现有组件my-com创建DOM节点。

Vue.component('my-book',{template:`<div class="book">你和我的倾城时光</div>`,
})
Vue.component('my-com',{render:h=>h('my-book')
})

例二：根据带有插槽的现有组件创建VDOM节点。

Vue.component('my-book',{template:`<div class="book"><slot></slot></div>`,
})
Vue.component('my-com',{render:h=>h('my-book',[h('div','我和我的VUE')])
})

例三：根据带有参数的现有组件创建VDOM节点。

Vue.component('my-book',{template:`<div class="book"><p>书名：{{bookName}}</p><p>作者：{{author}}</p><p>出版社：{{publish}}</p></div>`,props:['bookName','author','publish']
})
Vue.component('my-com',{render:h=>h('my-book',{props:{bookName:'听你的',author:'张皓宸',publish:'天津人民出版社'}})
})

例四：让现有组件作为VDOM节点的子节点：

Vue.component('my-book',{template:`<div class="book"><p>书名：{{bookName}}</p><p>作者：{{author}}</p><p>出版社：{{publish}}</p></div>`,props:['bookName','author','publish']
})
Vue.component('my-com',{render:h=>h('div',[h('h1','2020年畅销书'),h('my-book',{props:{bookName:'听你的',author:'张皓宸',publish:'天津人民出版社'}})])
})

三、创建具备插槽的VDOM节点：

注意：具备插槽的VDOM节点不能使用箭头函数。

创建具备一个匿名插槽的VDOM节点。

//DOM结构格式
Vue.component('my-dom',{template:`<div><slot></slot></div>`
})Vue.component('my-com',{render(h){return h('div',this.$slots.default)}
})

//使用
<my-com>我被放入匿名插槽中</my-com>

（1）创建一个下列格式的VDOM节点：<div><span style=“color:#ff5857;”><slot></slot></span></div>

render(h){return h('div',[h('span',{style:{color:'#ff5857'}})])}

（2）创建一个超级链接的VDOM节点。

<my-com url="https://www.baidu.com">百度百科</my-com>

Vue.component('my-com',{template:`<div><a href="url"><slot></slot></a></div>`,props:['url'],render(h){return h('div',[h('a',{attrs:{href:this.url}},this.$slots.default)])}
})
var vm = new Vue({el:'#demo',
})

例2：创建具备多个具名插槽的VDOM节点。

<my-com><span slot="abc">我是abc</span><span slot="xyz">我是xyz</span>
</my-com>

template:`
<div><h1><slot name="abc"></slot></h1><h2><slot name="xyz"></slot></h2>
</div>`,
render(h){return h('div',[h('h1',this.$slots.abc),h('h2',this.$slots.xyz)])
}

例3：创建具备一个默认作用域插槽的VDOM节点。

<my-com><template slot-scope="sc">{{sc.a}}+{{sc.b}}+{{sc.c}}={{sc.a+sc.b+sc.c}}</template>
</my-com>

Vue.component('my-com',{render(h){return h('div',this.$scopedSlots.default({a:100,b:200,c:33}))}
})

例4：创建具备多个具名的作用域插槽的VDOM节点。

<my-com><template slot-scope="sc" slot="abc">{{sc.a}}+{{sc.b}}={{sc.a+sc.b}}</template><template slot-scope="sc" slot="xyz">{{sc.x}}+{{sc.y}}</template>
</my-com>

Vue.component('my-com',{render(h){return h('div',[h('h1',this.$scopedSlots.abc({a:100,b:50})),h('h2',this.$scopedSlots.xyz({x:'A',y:'B'}))])}
})

虚拟DOM技术（1）相关推荐

vue：虚拟dom的实现
Vitual DOM是一种虚拟dom技术,本质上是基于javascript实现的,相对于dom对象,javascript对象更简单,处理速度更快,dom树的结构,属性信息都可以很容易的用javascr ...
javascript --- [虚拟DOM] 初始化实现
说明本篇主要说明为什么要使用虚拟DOM技术,以及如何实现简单的虚拟dom 您将会学到: 1.原生JS对DOM的操作 2.虚拟DOM的相关概念 3.DIFF算法的基础概念为什么提出 -> DO ...
面试官：什么是虚拟DOM？如何实现一个虚拟DOM？
故心故心故心故心小故冲啊文章目录一.什么是虚拟DOM 二.为什么需要虚拟DOM 三.如何实现虚拟DOM 小结参考文献一.什么是虚拟DOM 虚拟 DOM (Virtual DOM )这个概念相信 ...
简要分析git作用及应公司业务要求分析,什么是响应式和虚拟dom面试题
git Git是什么 Git版本控制系统是一个分布式的系统,是用来保存工程源代码历史状态(游戏存档)的命令行工具 Git是一个命令行(小黑窗)工具,用于版本控制(存档器) Git的作用是什么? 版本管 ...
从各大跨平台技术说开去，我们真的需要虚拟 DOM 吗？
前言你有没有留意到?优秀的解决方案思想都是相通的:当你研究 Flutter 渲染原理时会发现 Flutter Rendering 层类似于 React 中的虚拟 DOM,当你去看 Weex 工作原理 ...
从各大跨平台技术说起，我们真的需要虚拟 DOM 吗？
本文由 FeelsChaotic 授权投稿作者博客:https://juejin.im/post/5ce7e8fb51882555003dceef 前言你有没有留意到?优秀的解决方案思想都是相通的 ...
手把手教你React（一）JSX与虚拟DOM
初衷学习React有一段时间了, 一直想找个时间写一个React的系列文章.忙里抽闲,完成了第一篇.写这系列文章的初衷是总结这段时间的技术学习,以及给那些想学习React的同学们一点帮助.我会尽量以 ...
深入理解React（一）JSX与虚拟DOM
初衷使用 React 有一段时间了, 一直想找个时间写一个 React 的系列文章.忙里抽闲,完成了第一篇.写这系列文章的初衷是总结这段时间的技术学习,以及给那些想学习 React 的同学们一点帮助 ...
虚拟DOM Diff算法解析
React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法.这让我们可以无需担心性能问题而"毫无顾忌"的随时"刷新"整个页面,由虚拟DOM来确保只对界面 ...

虚拟DOM技术（1）

一、利用render函数代替组建中的template

二、根据现有的组件创建VDOM节点：

三、创建具备插槽的VDOM节点：

虚拟DOM技术（1）相关推荐

最新文章

热门文章