搞懂vue 的 render 函数, 并使用

本文介绍了Vue中的render函数,揭示了它如何替代模板HTML语法,通过JavaScript构建DOM,避免了模板转译的过程。Vue的render函数使用了createElement工具,简化了虚拟DOM的创建。同时,文章探讨了render函数的使用方法,包括在父组件和子组件中的应用,并提到了data对象的特殊处理。
摘要由CSDN通过智能技术生成

render函数是什么

  简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM

  因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode(虚拟节点)的函数,而用render函数构建DOM,vue就免去了转译的过程

  当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。

Vue的渲染过程                                                                                 
   template =>render() => h => h它是原生js的createElement() => 创建真实元素 => 生成虚拟dom

 使用render函数的渲染过程: 

render() => h => h它是原生js的createElement() => 创建真实元素 => 生成虚拟dom

render函数怎么用

父组件:

<template>
    <div class="hello">
        <Buttem :type="value" :text="text">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值