来聊聊Vue中使用Render函数和JSX

前端宇宙

共 10421字,需浏览 21分钟

 ·

2021-07-09 20:23


Render函数

render函数是组件渲染的重要核心,它跟template模板开发一样,只不过这种形式开发,它(render)更接近底层,这样能让Vue编译时少转换一次。

让我们来看一下哪里能用到render函数。

我们都知道Vue项目入口文件main.js里面有个render函数长下面这样,将项目的App根组件,挂载到根实例上通过render渲染。

new Vue({
  renderh => h(App)
}).$mount('#app')

我们来解刨一下render函数身体。

  • render函数返回值是一个VNode -> "virtual node"虚拟节点

  • render函数的参数是一个createElement函数

    • 第一个 标签名称
    • 第二个 属性值
    • 第三个 标签子级元素
    • createElement返回值也是一个VNode节点
    • createElement函数的参数有三个

「代码演示:」

index.js

export default {
    data() {
        return {
            name'蛙人'
        }
    },
    render(createElement) {
        return createElement(
            "div"
            { attrs: {title"蛙人"} }, 
            [
                createElement("span"null"蛙人")
            ]
        )
    }
}

main.js

import config from "./index.js"
Vue.component("test", config)

上面会调用标签会创建出一个div带有span子级的内容,注意createElement第二个参数属性这里,这里不能乱写,必须遵守官网风格点击这里。

当然这里肯定有人会问,这样写有什么用,跟template写不一样嘛,render函数这样写还麻烦可读性不强。

分情况,有时候用render更加灵活,咱就拿官网最典型的案例来「举个例子」

封装一个组件,进行传入数字参数,就显示数字参数的标签,你肯定会先想到这样。

<template>
    <div>
        <h1 v-if="num == 1"></h1>
        <h2 v-if="num == 2"></h2>
        <h3 v-if="num == 3"></h3>
        <h4 v-if="num == 4"></h4>
        <h5 v-if="num == 5"></h5>
        <h6 v-if="num == 6"></h6>
    </div>

</template>

上面这样实现是没问题的,但是代码会冗余,一堆判断。我们再来看一下render函数的实现

<script>
  render: function (createElement{
    return createElement(
      'h' + this.num,
    )
  },
  props: {
    num: {
      typeNumber,
      requiredtrue
    }
  }
</script>

上面两种都实现了同样的功能,是不是render函数这种方式看起来要简洁的多。所以一般用render函数封装东西是比较灵活的,尤其是配置和模板分离。深入理解配置这里。

什么是JSX

JSXJavScriptXML结合一种的格式,是JavaScript的扩展语法。说白了就是可以在JavaScript代码中使用JSXJavaScript在解析JSX时会先创建虚拟DOMJSX最后会被编译为JavaScript代码执行。

为什么要用JSX

有的人肯定觉得用render函数写如果嵌套子级太多层看着太别扭了,可读性太差。

export default {
    render(createElement) {
        return createElement(
            "div"
            { attrs: {title"蛙人"} }, 
            [
                createElement(
                    "span"
                    null
                    "蛙人"
                ),
                createElement(
                    "span"
                    null
                    createElement(
                        "b"
                        null
                        "前端娱乐圈"
                    )
                ),
                createElement(
                    "span"
                    null
                    createElement(
                        "b"
                        null
                        createElement(
                            "i"
                            null
                            "关注前端娱乐圈"
                        )
                    )
                )
            ]
        )
    }
}

比如上面这种,嵌套多层,可读性太差,时间一长自己还得捋半天。

所以为了解决这问题,JSX就登场了,JSX相当于就是createElement的语法糖,这种形式可以直接使用template模板那种格式在render函数里写。

我们用这种形式来还原一下上面的createElement写的,是不是这种很简洁易读。

export default {
    render() {
        return (<div>
            <span>蛙人</span>
            <span>
                <b>前端娱乐圈</b>
            </span>
            <span>
                <b>
                    <i>关注前端娱乐圈</i>
                </b>
            </span>
        </div>
)
    }
}

JSX和Render函数有什么不同

除了写法不一样外,没什么不同,属性都是遵循Vue文档上的。

我们来使用JSX语法,看看怎么使用,这里玩过React的同学估计都会使用。

export default {
 data() {
  return {
   name: "前端娱乐圈",
   dataList: {
    title: "前端娱乐圈",
    href: "www.baidu.com"
   }
  }
 },
    render() {
        return <div onClick={this.xxx} {...{attrs: this.dataList}}>{ this.name }</div>
    }
}

使用

「如果你的项目是Webpack搭建,babel@6的情况」

npm i @babel/core @vue/babel-preset-jsx babel-loader

根目录.babelrc文件

{
 "plugins": ["transform-vue-jsx"]
}

webpack.config.js

{
    test/\.js/,
    use"babel-loader"
}

「如果你的项目是Webpack搭建,babel@7的情况」

npm i @babel/core @vue/babel-preset-jsx babel-loader @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

根目录.babelrc文件

文档说明babel7兼容JSX问题

{
 "presets": ["@vue/babel-preset-jsx"]
}

webpack.config.js

{
    test/\.js/,
    use"babel-loader"
}

「如果你的项目是Vue-cli

最新版本的cli是会默认支持JSX语法的,如果你的版本较老请跟上面一样的配置。

npm i @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

参考

https://blog.csdn.net/sansan_7957/article/details/83014838

https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80

浏览 68
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报