doubleyong
管理员
管理员
  • 最后登录2021-06-18
  • 发帖数1013
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:199回复:0

[es 6]Vue中的renderless 非渲染组件

楼主#
更多 发布于:2021-06-02 13:18

面试中遇到的一个问题,

      什么是 renderless ?

       renderless 即非渲染组件开发的思想,

请看下文



01  什么是 render 函数

众所周知,在工程中,我们会在.vue文件中定义 <template>、<script>和<style>三种tag,分别盛放组件html、javascript和css。

&lt;template&gt;
&lt;button class="mood"&gt;
    pw_ state ? 'On' : 'Off' 
&lt;/button&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
data: () =&gt; ({ state: false })
}
&lt;/script&gt;
&lt;style&gt;
  .mood:after {
      color: white;
      background: blue;
  }
&lt;/style&gt;

但事实上,最后在生产环境中,我们只使用了一个巨大的JS文件,究其缘由还是得益于webpack的vue loader。

vuejs会把template元素提取出来,并进一步编译成一个叫render的函数。(有关render函数可以参考官方文档)

render(h) {
  return h(
    'button',
    {class: 'mood'},
    state ? 'On' : 'Off'
  )
}


render函数最后会被vue优化成VNode(虚节点),具体过程我不再赘述了。不过,这里提供了一个很有趣的思路:编写组件时,我们其实可以不写vue文件,不写template,只需要写render函数。


const button = {
  render(h) {
    return h(
    'button',
          {class: 'mood'},
    state ? 'On' : 'Off'
        )
  },
  data() {
    return {state: false}
  }
}

 

02 Renderless component 概念

这里引入一个Renderless component的概念,直译的话应该叫非渲染组件

Renderless意思就是组件只提供数据操作,不渲染任何内容。

const toggle = {
    render() {
    },
data() {
return { state: true }
    },
    methods: {
        toggle() {
this.state = !this.state
        }
    }
}
new Vue({
    el: '#parent',
    components: { toggle },
    ...
})

toggle就是所谓的Renderless组件了,只有数据和方法,不提供html template。父组件直接将其放入components即可当作一般子组件使用。


 
03 Renderless 示例
 
Renderless 组件不渲染,那谁负责渲染工作呢?嗯,就是Slots!父组件通过传递自定义的slots来定制子组件的html template。

&lt;toggle v-slot:default="{on, toggle}"&gt;
    &lt;div class="container"&gt;
        &lt;button @click="click(toggle)"&gt;
            pw_on ? 'On' : 'Off'
        &lt;/button&gt;
    &lt;/div&gt;
&lt;/toggle&gt;

这里提一下v-slot,它是vue 2.6以后的新语法,用来代替之前的 slot 和 slot-scope;v-slot:default 还可以简写成#default。Vue3应该不会再保留 slot 和 slot-scope 这种不伦不类的标签了。


希望能让插槽访问到子组件toggle里的数据和方法,以便之后点击button更改状态。子组件暴露作用域插槽也很简单,只要在render函数里返回$scopedSlots对象即可,这里因方便起见使用了默认的default插槽,自己实现的时候也可以重命名为任意插槽。

//toggle.js
const toggle = {
    render() {
return this.$scopedSlots.default({
            on: this.state,
            toggle: this.toggle,
        })
    },
data() {
return { state: true }
    },
    methods: {
        toggle() {
this.state = !this.state
        }
    }
}

最后我们在父组件调用renderless组件:

&lt;template&gt;
  &lt;toggle v-slot="{on, toggle}"&gt;
        &lt;div class="container"&gt;
        &lt;button @click="click(toggle)"&gt;
                        pw_on ? 'On' : 'Off'
        &lt;/button&gt;
        &lt;/div&gt;
  &lt;/toggle&gt;
&lt;/template&gt;
&lt;script&gt;
import toggle from 'toggle';
export default {
components: { toggle },
methods: {
        click(fn) {
            fn()
        },
    },
}
&lt;/script&gt;

这样一个简单的renderless开关就实现了。

假如你想自定义组件样式,或是说控制toggle渲染方式,更改也很容易,只需要在插槽里写下自定义代码即可:

&lt;toggle #default="{ on, toggle  }"&gt;
    &lt;div class="container"&gt;
    &lt;button @click="click(toggle)"
    :style="{background: on ? 'green' : 'red'}"&gt;
                pw_on ? 'On' : 'Off'
    &lt;/button&gt;
    &lt;/div&gt;
&lt;/toggle&gt;

因为toggle的逻辑不变,所以我们不需要更改这个renderless组件。只需稍微改动一下slot,button的背景色就会随着开关一起改变了。

嗯,这就是Renderless组件的效果,功能逻辑和页面渲染分开。





苟有恒 , 何必三更眠五更起

关注我,一起学习吧

鼓励一下,赐个赞 和 在看

图片:vx.png

知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号