TSX 在Vue项目的使用

_createVNode(“div”, null, [

_createVNode(“span”, null, “static”),

_createVNode(“p”, null, _toDisplayString(_ctx.msg), 1 /* TEXT */)

]),

_createVNode(“span”, null, “static”),

_createVNode(“span”, null, “static”)

]))

}

// Check the console for the AST

从上面的例子可以看出模板语法会变成虚拟DOM，然后通过render函数渲染。

如何在项目中使用JSX

---

项目是Vue3.0 + TS

想要使用JSX必须做两件事：

1. 给文件一个.tsx扩展名

2. 启用jsx选项

TypeScript具有三种JSX模式：preserve，react和react-native。 这些模式只在代码生成阶段起作用 - 类型检查并不受影响。 在preserve模式下生成代码中会保留JSX以供后续的转换操作使用（比如：Babel）。 另外，输出文件会带有.jsx扩展名。 react模式会生成React.createElement，在使用前不需要再进行转换操作了，输出文件的扩展名为.js。 react-native相当于preserve，它也保留了所有的JSX，但是输出文件的扩展名是.js。

tsconfig 默认 “jsx”: “preserve”,

{

“compilerOptions”: {

“target”: “esnext”,

“module”: “esnext”,

“strict”: true,

“jsx”: “preserve”,

“importHelpers”: true,

“moduleResolution”: “node”,

“experimentalDecorators”: true,

“skipLibCheck”: true,

“esModuleInterop”: true,

“allowSyntheticDefaultImports”: true,

“sourceMap”: true,

“baseUrl”: “.”,

“types”: [

“webpack-env”,

“jest”

],

“paths”: {

“@/*”: [

“src/*”

]

},

“lib”: [

“esnext”,

“dom”,

“dom.iterable”,

“scripthost”

]

},

“include”: [

“src/**/*.ts”,

“src/**/*.tsx”,

“src/**/*.vue”,

“tests/**/*.ts”,

“tests/**/*.tsx”

],

“exclude”: [

“node_modules”

]

}

JSX也是通过babel 进行编译成js,最后变成虚拟DOM进行渲染。

路由添加一个TSX组件

---

1、创建一个组件：

import { defineComponent } from ‘vue’

export default defineComponent({

render () {

return

my custom router

}

})

2、在Router里引用添加

/*

• @Description:

• @Author: ZY

• @Date: 2020-12-11 15:27:32

• @LastEditors: ZY

• @LastEditTime: 2020-12-12 14:38:31

*/

import { createRouter, createWebHashHistory, RouteRecordRaw } from ‘vue-router’

import Home from ‘…/views/Home.vue’

import Test from ‘…/views/Test’

import MyRouter from ‘…/views/MyRouter’

const routes: Array = [

{

path: ‘/’,

name: ‘Home’,

component: Home

},

{

path: ‘/about’,

name: ‘About’,

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)

},

{

path: ‘/test’,

name: ‘Test’,

component: Test

},

{

path: ‘/myRouter’,

name: ‘MyRouter’,

component: MyRouter

}

]

const router = createRouter({

history: createWebHashHistory(),

routes

})

export default router

运行下应该可以看到效果了。

渲染函数

---

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

通过例子实现一个通过属性实现动态生成标签的组件：

1、通常我们可以这么写

2、我们也可以通过渲染函数和h函数这么写

3、当然你也可以换个函数写法

JSX 语法

---

看了Vue中的各种render函数写法，你是否感觉写哪种都比较不舒服，这时候JSX可以出场了。

jsx 语法和vue模板语法思想大致相同，{{}}变成了{}，class支持面向对象style，等…

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

rn (_openBlock(), _createBlock(‘h’ + this.level, null, this.$slots))

}

})

JSX 语法

---

看了Vue中的各种render函数写法，你是否感觉写哪种都比较不舒服，这时候JSX可以出场了。

jsx 语法和vue模板语法思想大致相同，{{}}变成了{}，class支持面向对象style，等…

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

[外链图片转存中…(img-K6dZMeAF-1718019877229)]