快捷導(dǎo)航

簡(jiǎn)單談一談Vue中render函數(shù)

更新時(shí)間：2022年09月06日 14:49:32 作者：那只貓喝咖啡

vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

那如何證明？

翻譯如下：

大概意思是說(shuō)功能不全，沒(méi)有模板解析器。并且提供建議給你：1.使用render函數(shù) 2.引入帶有模板解析器的vue(完整的vue)，那意思就是說(shuō)vue并沒(méi)有引入完整？為什么？

我們就需要去依賴的地方看看到底有沒(méi)有完整引入。由于我們?cè)谝氲臅r(shí)候，地址直接寫(xiě)的就是vue，但是vue下還有很多路徑

module的意思就是如果使用的es6的模塊化引入方式，就使用 dist/vue.runtime.esm.js

import的確是es6的引入方式。這里面就是殘缺版的沒(méi)有模板解析器的vue。

如何解決？

render(createElement){

這個(gè)函數(shù)有返回值，需要return 并且這個(gè)參數(shù)createElement是一個(gè)函數(shù)，該函數(shù)可創(chuàng)建具體的節(jié)點(diǎn)//

return createElement('span','我是span')

}

那他和正常的默認(rèn)生成的還是有區(qū)別的，我們先看一下常規(guī)的render函數(shù)

僅僅只是一行render:h=>h(App)

我們可以根據(jù)上方代碼寫(xiě)成箭頭函數(shù)并簡(jiǎn)寫(xiě)形式(僅有一個(gè)參數(shù)去掉括號(hào)，return去掉改為一行)

render:createElement => createElement('span','我是span')

接下來(lái)將參數(shù)改成h或者任意字母就和上圖相似了

render:h=>h('span','我是span')

于是我們發(fā)現(xiàn)這樣就顯示出來(lái)了，如下圖↓ ↓ ↓ ↓

那我們?yōu)槭裁床徊捎脠?bào)錯(cuò)提示中的第二種方式引入完整的vue呢？

vue是由兩部分組成的，

1：vue核心：包含生命周期，處理事件...

2. 模板解析器

如果合在一起，模板解析器體積占總體積的1/3，webpack在進(jìn)行打包時(shí)會(huì)生成一個(gè)大的文件夾，本身模板解析器是不需要打包的，因?yàn)閣ebpack已經(jīng)將.vue文件變成了html,js,css，解析器就不再需要了。

問(wèn)題來(lái)了，為什么我們創(chuàng)建了一個(gè)app節(jié)點(diǎn)而且不需要加值就可以顯示出來(lái)內(nèi)容呢？

為啥template放在組件里就可以被解析呢？？？這是因?yàn)橛幸粋€(gè)插件所解決的

補(bǔ)充：vue2 小例子

# 父組件
<template>
  <div>
    <self :render="render"></self>
  </div>
</template>
<script>
import self from '@/components/self'
export default {
  components:{
    self
  },
  data() {
    return {
      render:h=>{
        return h(
          'div',
          {class:'red'},
          'nihao'
        )
      }
    }
  },
}
</script>
<style>
  .red {
    color: red;
  }
</style>


# 子組件
<script>
export default {
  name: "SelfText",
  props: {
    render: {
      type: Function,
      default() {
        return {};
      }
    }
  },
  render(h) {
    return this.render(h);
  }
};
</script>

vue3 小例子

# 父組件
<template>
  <div>
    <self :render="render"></self>
  </div>
</template>
<script>
import self from '@/components/self'
export default {
  components:{
    self
  },
  data() {
    return {
      render:h=>{
        return h(
          'div',
          {class:'red'},
          'nihao'
        )
      }
    }
  },
}
</script>
<style>
  .red {
    color: red;
  }
</style>


# 子組件
<script>
import { h } from 'vue'
export default {
  props: {
    render: {
      type: Function,
      default() {
        return {};
      }
    }
  },
  render() {
    return this.render(h);
  }
};
</script>

在vue3中，我們還可以使用setup來(lái)返回一個(gè)渲染的函數(shù)

<script>
import { h } from 'vue'
export default {
  setup() {
    return ()=>h(
      'div',
      {class:'red'},
      'nihaonihao'
    )
  }
}
</script>
<style>
  .red {
    color: red;
  }
</style>