您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

Vue 的 render 方法中 h 是什么?

2024/3/13 16:12:10发布47次查看
如果你接触过vue一段时间了,那么你可能会遇到过 rendering 方法在你的app文件中 -- 在最新版本的 cli 中它是一个默认值, 并且是在 main.js文件中:
new vue({ render: h => h(app)}).$mount('#app')
或者是,如果你使用了 render 方法(函数),可能会使用jsx:
vue.component('jsx-example', {  render (h) {    return <p id="foo">bar</p>  }})
或许你想知道,h 是用来干嘛的?它表示什么意思呢?  h  代表的是  hyperscript 。它是html的一部分,表示的是 超文本标记语言:当我们正在处理一个脚本的时候,在虚拟dom节点中去使用它进行替换已成为一种惯例。这个定义同时也被运用到其他的框架文档中。详情点击这里 cycle.js。
在这个问题上,evan 描述到:
hyperscript 它本身表示的是生成html结构的脚本
缩写为 h 是因为它更容易去输入。 他还在 frontend masters 上描述了这一点 他的高级 vue 研讨会 。
真的,你可以认为它是 createelement 的缩写。 这将是一个长长的形式:
render: function (createelement) {  return createelement(app);}
如果我们用 h 代替它,那么我们可以这样:
render: function (h) {  return h(app);}
...然后可以通过使用 es6 缩短:
render: h => h (app)
vue 版本最多需要三个参数:
render(h) {  return h('p', {}, [...])}
第一种是元素的类型(这里显示为 p)。
第二个是数据对象。 我们在这里主要包括:props, attrs, dom props, class 和 style.
第三个是一组子节点。 然后,我们将嵌套调用并最终返回一个虚拟 dom 节点树。
更深入的信息你可以在 vue 指南 里找到。
名称 hyperscript 可能会让某些人感到困惑,因为 hyperscript 实际上是 一个库的名字(这些日子没有更新 ),它实际上有一个 小的生态系统。 在这种情况下,我们不是在谈论那个特定的实现。
希望能为那些感到困惑的人解决问题!
推荐教程:《js》
以上就是vue 的 render 方法中 h 是什么?的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product