vue3+TS

1、 h函数（.vue文件的single-file-components模式最后会编译成js运行，大致是下面这种）

import { createApp, defineComponent, h } from "vue";
// import App from './App.vue'
import helloworld from "./components/HelloWorld.vue";
const App = defineComponent({
  // 通过defineComponent创建一个组件App
  render() {
    //渲染函数
    return h(
      "div", // h函数，第一个参数是原生节点、第二个参数节点的属性（id，class。。。），第三个参数是内部节点
      { id: "app" },
      [
        // 两个节点，所以是数组
        h("div", { class: "test" }),
        h(helloworld, { age: 123 }),
      ]
    );
  },
});
createApp(App).mount("#app");

h函数是createVNode 函数的一个封装，也可以直接使用createVNode 函数

import { createApp, defineComponent, createVNode } from "vue";
// import App from './App.vue'
import helloworld from "./components/HelloWorld.vue";
const App = defineComponent({
  // 通过defineComponent创建一个组件App
  render() {
    //渲染函数
    return createVNode(
      "div", // h函数，第一个参数是原生节点、第二个参数节点的属性（id，class。。。），第三个参数是内部节点
      { id: "app" },
      [
        // 两个节点，所以是数组
        createVNode("div", { class: "test" }),
        createVNode(helloworld, { age: 123 }),
      ]
    );
  },
});
createApp(App).mount("#app");

这里也可以使用setup函数返回

const App = defineComponent({
  // 通过defineComponent创建一个组件App
  setup() {
    return () => {
      //渲染函数
      return h(
        "div", // h函数，第一个参数是原生节点、第二个参数节点的属性（id，class。。。），第三个参数是内部节点
        { id: "app" },
        [
          // 两个节点，所以是数组
          h("div", { class: "test" }),
          h(helloworld, { age: 123 }),
        ]
      );
    };
  },
});

2.eslint中取消代码行的检查 // eslint-disable-line

const img = require(src) // eslint-disable-line

3:、setup:可以return一个对象

setup (){
	const name = ref('jack')
	const isage = ref(12)
	const info = reactive({
		name: 'jack',
		isage : 12
	})
	return { //响应式的（使用：{{name}}）
		name,
		age:isage
	}
	//或者
	return info //响应式的（使用：{{name}}）
	return { //响应式的（使用：{{info.name}}）
		info
	}
	//或者
	return { // 非响应式的（使用：{{name}}）
		...info
	}
}

注意：setup只会执行一次，但是return中的对象变化时可以引起return再次执行return出新的对象，所以在setup中赋值一个变化的变量时，只会输出初始值，需要把赋值操作放在return中才能得到变化的数据

4，vue3集成jsx
步骤：
1.yarn add @vue/babel-plugin-jsx -D

2.babel.config.js内加入plugins: [’@vue/babel-plugin-jsx’]

3.src文件夹中创建一个App.tsx的文件

//App.tsx
import { defineComponent, reactive, ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const img = require('./assets/logo.png')// eslint-disable-line
export default defineComponent({
  // 通过defineComponent创建一个组件App
  setup() {
    const state = reactive({
      name: 'jack'
    })
    const numberRef = ref(1)
    setInterval(() => {
      state.name += '1'
      numberRef.value +=1
    },5000)
    return () => {
      return <div id="app">
        <img src={img}></img>
        <p>{state.name + numberRef.value}</p>
        <HelloWorld msg="1212"/>
        //HelloWorld.vue 组件props要求msg为必须并为字符串格式时，
        //这里msg不传或者传其他类型在编译时ts都会报错
        //(这是ts报错不是的eslint报错，只有build的时候才报错
        //并不能及时的在开发时报错提示，如果引入的是HelloWorld.tsx文件就可以开发时报错，或者加一个对于vue文件的shim）
      </div>
    };
  },
});

在main.ts中引入

import App from "./App";

4.json-schema
安装版本6：

npm install ajv@6

创建js文件

// test.js
/* eslint-disable prettier/prettier */
const Ajv = require('ajv')
const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
ajv.addFormat('Formattest', (data) => { // 自定义Format，第一个参数为名字，第二个参数为字符串、正则、返回布尔值的方法（输入的字符串为hhhhh）
  return data === 'hhhhh'
})
const schema = {
  type: 'object',
  properties: {
    foo: { type: 'string', format: 'email' },
    footest: { type: 'string', format: 'Formattest' },
    bar: { type: 'array', items: [{ type: 'integer' }, { type: 'string' }] },
  },
  required: ['foo'],
  additionalProperties: false,
}
const data = {
  foo: '[email protected]',
  bar: [1212, 'abc'],
  footest: 'hhhhh',
}
const validate = ajv.compile(schema)
const valid = validate(data)
if (!valid) console.log(validate.errors)

进入文件夹运行文件

node test.js