vue.js 的数据渲染 render

render 函数是干嘛的? ➡➡➡ vue官方介绍

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

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

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

  • vm中有一个方法_c,也是这个函数的别名

此处借鉴自https://www.cnblogs.com/weichen913/p/9676210.html

render 函数介绍

  • render 函数即渲染函数,它是个函数,它的参数也是个函数——即 createElement
  • createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数
  • createElement 函数的返回值是 VNode(即:虚拟节点)

基础代码解释:

最基础代码:第一个参数,必填

/*----------------------html----------------------------*/

    <div id="root">你好!</div>
    
/*----------------------js----------------------------*/
    new Vue({
        el:"#root",

        render(createElement){
            return createElement("h1","我是热爱学习人,因为学习使我快乐!");
            					//第一个值是 标签 ,第二个是你的内容
        }
    })

结果展示:
在这里插入图片描述
可以看到 h1 已经渲染进去了,不过我们发现 div 里面的内容被覆盖掉了


render和组件结合使用

/*----------------------html----------------------------*/

    <div id="root">你好!</div>
    
/*----------------------js----------------------------*/
    new Vue({
        el:"#root",
        components:{
            App:{
                template:`<div>我是一个名字为App的组件</div>`
            }
        },
        render(createElement){
            return createElement("App");
        },
    })
  • 这里的 return createElement(“App”) 必须用双引号包裹
  • 否则要把 App 拿出来定义
    const App = {
        template:`<div>我是一个定义 在外部的App组件</div>`
    }

结果展示:
在这里插入图片描述

详细代码展示相关文章 ⬅⬅⬅

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js渲染工作方式可以概括为以下几个步骤: 1. 解析模板:Vue.js通过解析模板生成虚拟DOM树,虚拟DOM树是一个内存中的数据结构,它描述了模板中的节点、属性和事件等信息。 2. 创建实例:Vue.js创建一个Vue实例,它包含了模板中的数据和方法,以及虚拟DOM树。 3. 挂载实例:Vue.js将Vue实例挂载到DOM元素上,这个过程称为挂载。 4. 响应式更新:当数据发生变化时,Vue.js会检测到变化,并且重新渲染虚拟DOM树。 5. 生成补丁:Vue.js会生成新的虚拟DOM树,并且与旧的虚拟DOM树进行比较,生成一份差异补丁,这个过程称为Diff算法。 6. 应用补丁:Vue.js将差异补丁应用到DOM元素上,更新视图。 具体来说,Vue.js渲染工作方式包含以下几个关键点: 1. 模板编译:Vue.js将模板编译成渲染函数,渲染函数是一个JavaScript函数,它接受数据对象作为参数,返回虚拟DOM树。 2. 虚拟DOM:Vue.js使用虚拟DOM来描述组件的状态和结构,虚拟DOM是一个轻量级的数据结构,它可以高效地进行DOM操作。 3. 响应式系统:Vue.js通过数据劫持和发布订阅模式实现响应式更新,当数据发生变化时,Vue.js会自动检测变化,并且重新渲染视图。 4. Diff算法:Vue.js使用Diff算法来比较新旧虚拟DOM树的差异,生成一份补丁,然后将补丁应用到DOM元素上,更新视图。 总的来说,Vue.js渲染工作方式是基于虚拟DOM和响应式系统的,它通过高效的算法和数据结构来实现快速的DOM操作和响应式更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值