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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
纯javascript版日历控件
Nov 24 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 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
Yii分页用法实例详解
2014/12/04 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
python flask安装和命令详解
2019/04/02 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
opencv python图像梯度实例详解
2020/02/04 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
初婚未育未抱养证明
2014/01/12 职场文书
学校推普周活动总结
2015/05/07 职场文书
学校团代会开幕词
2016/03/04 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS