render和虚拟DOM

render和虚拟DOM

作用：一个组件的内容有两种书写方式

1. template：通过模板语法指定组件内容
2. render函数：通过render来确定组件内容

用法：

<script>
export default {
    functional:true
    //h是一个函数，这个函数的返回值是VNode（虚拟DOM）
    render:(h)=>{
        retrun h('h1','这是一个h1标签,且是一个组件')
    }
}
</script>

可以用template创造组件，也可以用render创造组件

如果template配置项和render配置项同时存在，以render为准

响应式：数据发生变化会再次调用render函数，产生新的虚拟dom，与初始的虚拟dom比较，通过变动更新真实dom

优点：render相对template更加灵活

函数h中有三个参数：

1. 参数1：标签名
2. 参数2：对参数1中的标签的属性设置
3. 参数3：参数1的子元素，也可以是一个VNode数组

h('div',{'class':'myDiv'},'我是div的内容')
<div class="myDiv">我是div的内容</div>

每一个组件都会有一个render函数，用来根据不同的数据生成不同的虚拟DOM

一般通过template定义组件，vue内部会自动生成render函数

虚拟DOM

真实DOM是一个对象，它的属性非常多，在浏览器中做dom操作会消耗性能
虚拟DOM也是一个对象，但是属性相对较少，消耗性能较少，它无法在浏览器中直接显示

为什么Vue中会用到虚拟DOM

• 虚拟DOM比真是DOM体积小一些，操作相对来说性能消耗少一些，假设要在页面删除一个DOM元素，会重绘页面
• 虚拟DOM才可能跨端（服务器端也可以用vue），跨平台。如果直接操作真实DOM，则与浏览器强制绑定在一起，vue就失去了更多的可能性

Vue如何使用虚拟DOM

• 所有的template都会编译成render函数
• render函数会根据当前的数据项，生成虚拟DOM
• 再从虚拟dom转成真实dom