1. vue中可用的相关技术

1. vue基础知识

vue入门很简单，官网的介绍即可，vue官网链接

2. vue的组件

1. .vue文件形式的组件

一般vue组件的代码如下：

<template>
    <div>
        vue template
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    mounted() {

    },
    methods: {}
}
</script>

<style>
body {
    opacity: 1;
}
</style>

组件打印出来会是什么样子的？

// 打印代码如下
import Demo1 from './components/Demo1.vue'
console.log(Demo1);

打印结果 那么这种vue组件的实质是什么？

本质上vue组件是一个对象，里面包含属性：data，mounted，methods，render等等，感觉很熟悉的样子!

**其实就是vue组件里面我定义的data，mounted，methods **

render则是一个经过vue编译template部分后，生成的编译函数，目的是为了生成虚拟dom。

将render函数打印出来看看

console.log(Demo1.render)

打印结果如下，其实就是一个render函数，return出来了虚拟dom。

2. .js形式的组件

代码大致如下

export default {
    data() {
        return {}
    },
    methods: {},
    mounted() {

    },
    render() {
        return (
            <div style="width: 15%; height: 100%; background: #000; color: #fff;position:absolute;left:0px;top:0px;">
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                    <li>menu4</li>
                </ul>
            </div>
        )
    }
}

其实和.vue组件比起来，就是差在了render函数上，这里render函数内使用了jsx，关于jsx后面详细记录，打印结果如下：

惊奇的发现和以上.vue组件打印出来的基本差不多。其实这是webpack打包的结果，上面.vue组件打印出来的属性有些是我们组件内没有写的属性，但是依然在对象中，是因为webpack利用vue的compile，将.vue组件或者.js组件都编译了，最终编译成了对象的形式了。

3. vue的渲染函数

文档中有很详细的说明(链接）

4. vue中使用jsx && 基础版的动态根据json生成页面

jsx基本使用链接

首先jsx在react中用的比较多，但是也并不是只有react可以用jsx，相比于直接写createElement函数，写jsx轻松许多了。

最新版的vue-cli（2021/8/19）已经能够做到零配置，直接使用jsx了，非常感谢尤大大，体贴入微。

接下来我就写一些jsx中跟低代码相关的使用介绍：

1. 根据数据生成普通html的jsx用法

简单起见，就不考虑样式，属性等等啦

代码如下，根据array提供的数据，最终利用render函数生成了页面。

const array = [
    {
        tag: 'div',
        innerHTML: 'this is div element'
    },
    {
        tag: 'p',
        innerHTML: 'this is p element'
    },
    {
        tag: 'h1',
        innerHTML: 'this is h1 element'
    },
];

export default {
    render(h) {
        return (
            <div>
                {
                    array.map(item => {
                        return h(
                            item.tag,
                            {
                                domProps: {
                                    innerHTML: item.innerHTML
                                }
                            }
                        )
                    })
                }
            </div>
        );
    }
}

生成的页面如下：

2. 根据数据生成vue自定义组件的jsx用法。

这里需要动态的将自定义组件引入进来，不知道是否有更好的方法，有的话麻烦指正，非常希望有一个更好的方式。

逻辑是： 根据home.json提供的数据，暂且可以认为是简易的页面数据，动态的引入到home.js组件内，然后动态的利用h函数(就是vue的createElement函数)生成一个虚拟dom数组，最终利用jsx完成动态的渲染。

business.js

import { isString } from 'lodash';

/**
 * 获取组件
 * @param {String} componentName 组件名称，也就是js文件的名字
 * @returns 对象
 */
export const getComponent = (componentName) => {
    if (!isString(componentName)) return {};
    return {
        [componentName]: () => import(`@/views/home/components/${componentName}.js`)
    }
}

home.json

[    {        "name": "Sidebar"    },    {        "name": "Navbar"    },    {        "name": "Main"    }]

home.js

import { getComponent } from '@/util/business.js';
import homeData from './home.json';

// 根据数据获取组件的引用，便于引入到vue中
function getComponents() {
  const obj = {};
  const arr = homeData;
  arr.forEach(item => {
    Object.assign(obj, getComponent(item.name));
  });
  return obj;
}

// 根据数组动态获取组件的虚拟dom数组，方便render函数内渲染
function getVNodeComponents(h) {
  const resArr = [];
  const arr = homeData;
  arr.forEach(item => {
    resArr.push(h(item.name));
  });
  return resArr;
}

export default {
  name: 'Home',
  components: getComponents(),
  data() {
    return {
      arr: []
    }
  },
  mounted() {},
  methods: {},
  render() {
    let arr = getVNodeComponents(this.$createElement);
    return (
      <div style="width: 100vw; height: 100vh;position: relative;">
        {
          arr.map(item => {
            return item
          })
        }
      </div>
    )
  }
}