render函数的一些小知识
2019-02-26 本文已影响0人
kangaroo_v
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
如何理解官网上的这句话呢? 让我们来看下以下的例子
//组件的template选项
<template id="app1">
<div class="app">
{{msg}}
</div>
</template>
<body>
<div id="app">{{msg}}</div>
<script>
new Vue({
el:'#app',
template:'#app1',
data:{
msg:'bmw'
}
})
</script>
有template选项的效果
此时我们可以看到 注入点#app没有了 说明
如果你有template选项 此处的目标会把注入点 #app给替代掉 (注意template本身不会被渲染)
接下来让我们把template选项给注释掉
<template id="app1">
<div class="app">
{{msg}}
</div>
</template>
<body>
<div id="app">{{msg}}</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'bmw'
}
})
</script>
</body>
没有template选项的效果
如果你没有template选项 Vue会把目标往注入点#app的div里面插入
切记、 这是vue注入的默认情况 接下来让我们初步了解一下render函数
new Vue({
el:'#app',
template:'#app1'
})
当我们不写render的时候 Vue 默认是拿着el 这个注入点、template指向的模板、去替换模板里的内容.
可是当我们想用模板去替换注入点的时候 不单单是个模板 而是一个组件(组件自身有自己的数据而不是根实例上的数据去替换模板里的内容) 这个时候 你就需要一个选项 render 因为使用template指向模板并不能满足我们的需求
类型：(createElement: () => VNode) => VNode
这本质上是一个渲染函数 需要你自己定义渲染过程 哪怕你没写东西也会替换掉注入点
//错误示范
new Vue({
el:'#app',
render:()=>{
return `<div>我是渲染函数生成的组件</div>`
}
})
👆以上方法并不能渲染到页面上
直接return 并不能没有什么卵用
如何使用呢? 其实render函数接受一个creatElement参数(参数名可以自定义) 这个参数是个函数 目的是渲染一个组件到目标注入点 注意必须要return这个函数
<body>
<div id="app">ooo</div>
<script>
let App = {
template: '<div class="app">{{msg}}</div>',
data(){return {msg:'bmw'}}
}
new Vue({
el: '#app',
render: (createElement) => {
console.log('手写渲染函数部分')
return createElement(App)//返回渲染之后的组件到注入点id=app
//..
}
//也可以简写
render: cE => cE(App)
})
</script>
</body>
这样我们就能依靠render函数来自己描绘渲染过程并且指定组件作为渲染内容 此时根节点是没有data的 页面上使用的也是组件自身的函数
