render函数的一些小知识

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指向的模板、 $\color{red}{用你自身的数据}$ 去替换模板里的内容.
可是当我们想用模板去替换注入点的时候不单单是个模板而是一个组件(组件自身有自己的数据而不是根实例上的数据去替换模板里的内容) 这个时候你就需要一个选项 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的页面上使用的也是组件自身的函数

最后编辑于：2019.02.26 16:10:46

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

render函数的一些小知识