I used to be a React developer with 3 years of react development experience. Later, I was transferred to vUE technology stack due to my work, but I always remember the JSX writing method of React. Since Vue3.0 came out, I have been paying attention and learning. Here are some practical notes on Vue3.0 + TS + JSX.

Two ways of writing JSX
First: instead of returning HTML in render, use a function in setup to return it

When the setup function returns a function, the function is treated as the render function (which overrides the render function in Opitons).

import { defineComponent, ref, reactive } from 'vue' export default defineComponent({ name: 'Home', setup() { const itemName = ref('520') const item = reactive({ name: 'hon star,'}) return () = > {return (< div > Home {itemName. Value} {item. The name} < / div >)}},})Copy the code

Note that in the first case, you need to use ref for basic data to make it usable in the template, and in the template you need to use.value to get the data, so you don’t enjoy the structure ref, which is not very elegant, and actually breaks the setup return object as the interface between the View and model layers

Second: return HTML in render

import { defineComponent, ref, reactive } from 'vue' export default defineComponent({ name: 'Home', setup() { const itemName = ref('520') const item = reactive({ name: Return {itemName, item}}, render(CTX) {return (<div> Home {ctx.itemName} {ctx.item.name} </div>)}})Copy the code

The second method uses this directly to get the argument

import { defineComponent, ref, reactive } from 'vue' export default defineComponent({ name: 'Home', setup() { const itemName = ref('520') const item = reactive({ name: Return {itemName, item}}, render() {return (<div> Home {this.itemName} {this.item.name} </div>)}})Copy the code
Use the template template directive in JSX

@vue/babel-plugin-jsx


npm install @vue/babel-plugin-jsx -D
Copy the code

Configure the Babel


{
  "plugins": ["@vue/babel-plugin-jsx"]
}
Copy the code

Then you can use the V-Model


<input v-model={val} />
Copy the code
Ref binding problem in render
import { defineComponent, ref, reactive } from 'vue' export default defineComponent({ name: 'Home', setup() { const homeRef = ref(null) const itemName = ref('520') const item = reactive({ name: Return () => {return (<div ref={homeRef}> Home {itemName.value} {item.name} </div>)}},})Copy the code

To return HTML in render, you need to dynamically bind ref

import { defineComponent, ref, reactive } from 'vue' export default defineComponent({ name: 'Home', setup() { const homeRef = ref(null) const itemName = ref('520') const item = reactive({ name: Return {itemName, item}}, render(CTX) {return (<! When dynamically binding, we can define ref as a callback function, Explicitly pass an element or component instance --> <div ref={el => ctx.homeref = el}> Home {ctx.itemName} {ctx.item.name} </div>)}})Copy the code
The role of shims-vue.d.ts file

Shims-vue. D. ts is a typescript adaptation of a. Vue file because it is not a normal file type and ts does not understand what a vue file is. Delete this section, and you will find that all vUE type files imported will report errors.