vue 的 render 函数
2019-02-12 本文已影响0人
liwuwuzhi
render 函数的基本用法
什么是render函数
vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。实际上用template来创建html 在 webpack 做编译时 template 会被编译成 render 来运行的。
语法
render(createElement){ return createElement() }
createElement() 有三个参数:
第一个参数，必选，为 HTML 标签或组件或函数；
第二个参数，可选，为数据对象，标签属性等；
第三个参数，可选，该标签内容或子节点；
看下面简单的例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
background:#abcdef;
}
</style>
</head>
<body>
<div id="dome">
<div>{{message}}</div>
</div>
<script>
new Vue({
el:"#dome",
data:{
message:"hello world"
},
methods:{
mouseOverLog(){
console.log(this.message)
}
},
render(createElement){
// createElement(html标签, 标签属性, 子元素)。
return createElement(
"span", //第1个参数 - html 标签
{ //第2个参数 - 在一个对象里设置该标签属性
style: { marginLight: "8px", padding: "10px 20px", background: '#abcdef' },
on: {
click: () => {
console.log('click')
},
mouseover: () => {
console.log('mouseover');
this.mouseOverLog();
}
}
},
'我是内容' //第3个参数 - 该标签的子元素
)
}
});
</script>
</body>
</html>
当 createElement 的第三个元素为多个子元素时应用数组来包裹。
new Vue({
el:"#dome",
data:{
message:"hello world"
},
render(createElement){
return createElement(
"ul",
{
class:{bg:true},
},
[
createElement("li", this.message),
createElement("li",'hello world 2'),
]
);
}
});
什么时候会用到render函数
情景1： https://juejin.im/post/5a715ec96fb9a01cad7c7958
情景2:
当用 vue-cli 创建项目时，在main.js文件能看到如下代码
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
这里的 render: h => h(App) 是什么意思呢？
转换为es5语法后如下：
render: function(h) {
return h(App);
}
当把h参数换成 createElement后
render: function(createElement) {
return createElement(App);
}
再来看一个例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 提供一个在页面上已经存在的 DOM 元素作为 Vue 实例挂载目标
render: function (createElement) {
return createElement('h2', 'Hello Render!');
}
});
</script>
</body>
</html>
是不是回到上面熟悉的场景了。
既创建一个 内容为 ‘Hello Render’ 的 h2 标签，替换到id为app的容器上。
注意不管是 template 还是 render 都是挂载（替换）到 el 所指定的元素，而不是在放在该元素里面。
参考文章：
https://juejin.im/post/5a715ec96fb9a01cad7c7958
希望这篇文章能帮助到你。
END
