簡單談一談Vue中render函數

Posted on by

首先我們引入的vue並不是一個完整的，而是殘缺版的vue(沒有模板解析器)

那如何證明？

翻譯如下： 

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

我們就需要去依賴的地方看看到底有沒有完整引入。由於我們在引入的時候，地址直接寫的就是vue，但是vue下還有很多路徑

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

import的確是es6的引入方式。這裡面就是殘缺版的沒有模板解析器的vue。

如何解決？

render(createElement){

        這個函數有返回值，需要return 並且這個參數createElement是一個函數，該函數可創建具體的節點//

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

        }

那他和正常的默認生成的還是有區別的，我們先看一下常規的render函數

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

我們可以根據上方代碼寫成箭頭函數並簡寫形式(僅有一個參數去掉括號，return去掉改為一行)

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

 接下來將參數改成h或者任意字母就和上圖相似瞭

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

於是我們發現這樣就顯示出來瞭，如下圖↓        ↓        ↓        ↓       

那我們為什麼不采用報錯提示中的第二種方式引入完整的vue呢？

vue是由兩部分組成的，

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

        2.   模板解析器

如果合在一起，模板解析器體積占總體積的1/3，webpack在進行打包時會生成一個大的文件夾，本身模板解析器是不需要打包的，因為webpack已經將.vue文件變成瞭html,js,css，解析器就不再需要瞭。

問題來瞭，為什麼我們創建瞭一個app節點而且不需要加值就可以顯示出來內容呢？

為啥template放在組件裡就可以被解析呢？？？這是因為有一個插件所解決的

補充：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來返回一個渲染的函數

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

總結：

vue.js和vue.runtime.xxx.js的區別

   （1）vue.js是完整版的Vue。包含：核心功能+模板解析器

   （2）vue.runtime.xxx.js是運行版的Vue，隻包含核心功能

因為vue.runtime.xxx.js沒有模板解析器，所以不能使用template配置項，需要使用render函數接收到的createElement函數去指定具體內容

到此這篇關於Vue中render函數的文章就介紹到這瞭,更多相關Vue中render函數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：