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 相关文章推荐
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JavaScript中string对象
Jun 12 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
js倒计时简单实现方法
Dec 17 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
javascript实现抢购倒计时程序
Aug 26 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
php中常用的预定义变量小结
2012/05/09 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
Python返回数组/List长度的实例
2018/06/23 Python
python读写LMDB文件的方法
2018/07/02 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
Python如何急速下载第三方库详解
2020/11/02 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
民事授权委托书范文
2014/08/02 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
2015年商场工作总结
2015/04/27 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android