2024年最新TSX 在Vue项目的使用，2024Web前端精选面试实战总结整理

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

思考

---

---

问：SFC和JSX 优劣势，Vue模板语法快捷方便为什么还要学JSX?

答： 我的理解SFC更侧重Html语法，就像画一幅画，使用标签画好结构，再将数据使用js进行填充，这样js的灵活性就难以发挥。JSX侧重于JS语法，没有条条框框的架子，可以在白色画布灵活自由的画画。

有点类似于Vue3的 composation API和opitions API的关系。

| SFC | JSX |

| — | — |

| 简单、迅速 、高效 | 灵活、对于复杂组件组合高效 |

Vue模板语法是怎么渲染的呢？

---

---

下面是Vue的模板：

static

{{msg}}

static

static

查看模板编译工具：传送门

Vue会将模板处理成下面的代码：

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from “vue”

export function render(_ctx, _cache, $props, $setup, $data, $options) {

return (_openBlock(), _createBlock(“div”, null, [

_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函数这么写