Vue Render函数原理及代码实例解析


Posted in Javascript onJuly 30, 2020

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

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

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

虽然在render里使用createElement函数创建DOM节点不是很直观,但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component :list="list"></my-component>
  </div>
  <script src="vue.js"></script>
  <script>
    Vue.component('my-component', {
      props: {
        list: {
          type: Array,
          default: () => []
        }
      },
      render(createElement) {
        if (this.list.length) {
          return createElement('ul', this.list.map(item => createElement('li', item)))
        } else {
          return createElement('p', 'Empty list')
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        list: ['html', 'css', 'javascript']
      }
    })
  </script>
</body>
</html>

另外,由于v-if,v-else,v-show等指令都无法在render里使用,需要自己手动实现,拿常用的v-model举个栗子:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.component('my-component', {
  data() {
    return {
      message: ''
    }
  },
  render(createElement) {
    return createElement(
      'div',
      [
        createElement(
          'input',
          {
            on: {
              input: e => this.message = e.target.value
            }
          }
        ),
        createElement('p', this.message)
      ]
    )
  }
})
Javascript 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
js自定义select下拉框美化特效
May 12 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
vue - props 声明数组和对象操作
Jul 30 #Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 #Javascript
vue如何使用外部特殊字体的操作
Jul 30 #Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 #Javascript
JavaScript JSON使用原理及注意事项
Jul 30 #Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 #Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 #Javascript
You might like
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python多线程下信号处理程序示例
2019/05/31 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python3列表List入门知识附实例
2020/02/09 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Python 必须了解的5种高级特征
2020/09/10 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
机械专业应届生求职信
2013/09/21 职场文书
国际商务专业学生个人的自我评价
2013/09/28 职场文书
护士思想汇报
2014/01/12 职场文书
对标管理实施方案
2014/03/12 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
医院营销工作计划
2015/01/16 职场文书
法院执行局工作总结
2015/08/11 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js