Vue 脚手架中使用 render 函数

Vue的官方介绍

大致意思就是说 在render 函数中 通过 createElement 来创建Vnode 的虚拟 dom(Vue的核心思想虚拟dom)

在脚手架中的使用

新建renderDemo.vue ,index.js文件

<script>
export default {
  name: "renderDemo",
  data() {
    return {};
  },
  methods: {},
  created() {},
  render(createElement) {
    return createElement("div", "render 创建的Div");
  },
};
</script>

index.js

import Render from './renderDemo'
export { Render}

使用

<template>
  <div class="hello">
   <img alt="Vue logo" src="../assets/logo.png" />
     <render></render>
  </div>
</template>

<script>
 import {Render} from '@/components'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components:{
    // RenderDemo,
    Render
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

页面显示：

注：

1. 与methods ,created 等同一级
2. 弃用 template 模板 创建dom （如果使用template会替换render中的内容）
3. 使用了render 就必须有返回值否则会报错

这是官方的使用方法 更多使用可参考vue官网：https://cn.vuejs.org/v2/guide/render-function.html

官方的使用方法是通过createElement 去创建一个dom 节点 然后将内容返回
既然都是返回节点 也可以这样去实现

<script>
export default {
  name: "renderDemo",
  data() {
    return {};
  },
  methods: {},
  created() {},
  render() {
    return (
        <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
        </ul>
    ) 
  },
};
</script>

或者循环生成

<script>
export default {
  name: "renderDemo",
  data() {
    return {};
  },
  methods: {},
  created() {},
  render() {
    const List = [
      {
        name: "1",
      },
      {
        name: "2",
      },
      {
        name: "3",
      },
      {
        name: "4",
      },
    ];

    const LiMap = List.map((v, i) => {
      return <li key={i}>{v.name}</li>;
    });

    return <ul>{LiMap}</ul>;
  },
};
</script>

添加事件

<script>
export default {
  name: "renderDemo",
  data() {
    return {};
  },
  methods: {
    activateLasers() {
      console.log("点击了li");
    },
  },
  created() {},
  render() {
    const List = [
      {
        name: "1",
      },
      {
        name: "2",
      },
      {
        name: "3",
      },
      {
        name: "4",
      },
    ];

    const LiMap = List.map((v, i) => {
      return (
        <li key={i} onClick={this.activateLasers}>
          {v.name}
        </li>
      );
    });

    return <ul>{LiMap}</ul>;
  },
};
</script>

需要传递数据时(学过react的童鞋应该不陌生，这里就不过多解释了)

<script>
export default {
  name: "renderDemo",
  data() {
    return {};
  },
  methods: {
    activateLasers(i) {
      console.log(`第${i+1}个li`);
    },
  },
  created() {},
  render() {
    const List = [
      {
        name: "1",
      },
      {
        name: "2",
      },
      {
        name: "3",
      },
      {
        name: "4",
      },
    ];

    const LiMap = List.map((v, i) => {
      return (
        <li key={i} onClick={()=>this.activateLasers(i)}>
          {v.name}
        </li>
      );
    });

    return <ul>{LiMap}</ul>;
  },
};
</script>

v-model 和 v-show

<script>
export default {
  name: "renderDemo",
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    activateLasers(i) {
      console.log(`点击了第${i + 1}li`);
      this.active = i;
    },
    nextClick() {},
  },
  created() {},
  render() {
    const List = [
      {
        name: "1",
      },
      {
        name: "2",
      },
      {
        name: "3",
      },
      {
        name: "4",
      },
    ];

    const LiMap = List.map((v, i) => {
      return (
        <li key={i} onClick={() => this.activateLasers(i)}>
          {v.name}
        </li>
      );
    });

    return (
      <ul>
        {LiMap}
        <input v-model={this.active} />
        <h1 v-show={this.active == 1}>输入为1或者点击第一个Li时显示</h1>
      </ul>
    );
  },
};
</script>

注：render函数不支持使用 v-if 等语法

可以使用 三目运算符 不能使用复杂判断 如if 和switch try 等

    return (
      <ul>
        {LiMap}
        <input v-model={this.active} />
        <h1 v-show={this.active == 1}>输入为1或者点击第一个Li时显示</h1>
        {this.active == 2 ? <h2>输入为2或者点击第二个Li时显示</h2> : ""}
      </ul>
    );

可以使用 map find some every等数组方法 不支持使用 for 循环

  return (
      <ul>
        {LiMap}
        <input v-model={this.active} />
        <h1 v-show={this.active == 1}>输入为1或者点击第一个Li时显示</h1>
        {this.active == 2 ? <h2>输入为2或者点击第二个Li时显示</h2> : ""}
        {
          List.map((v) => {
          if (v.name == "4") {
            return <h4>显示第四个Li</h4>;
          }
         })
        }
      </ul>
    );

个人理解：render 函数相对template 模板更加灵活，开阔程序的可变性， 一个复杂的功能点能够细分为多个, 使组件页面逻辑更加清晰，借鉴react 开发思维 ， 更多是用于 功能性组件的封装