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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
学习YUI.Ext 第三天
Mar 10 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
js实现消息滚动效果
Jan 18 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
深入浅析python继承问题
2016/05/29 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
表彰先进集体通报
2014/01/12 职场文书
论文指导教师评语
2014/04/28 职场文书
操行评语大全
2014/04/30 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
创优争先心得体会
2014/09/11 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2014年政协工作总结
2014/12/09 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python