vue2.x+vuex项目Typescript改造：vue模板从jsx到tsx需要注意的事项
Author：zhoulujun Date：
vue与TSX结合
实现方案有很多种，个人推荐：@vue/babel-preset-jsx
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
babel.config.js presets
{
"presets":
[
'@vue/babel-preset-jsx',
{
vModel: true,
compositionAPI: true,
functional: true,
},
],
}具体配置查看：https://github.com/vuejs/jsx-vue2/tree/master/packages/babel-preset-jsx
vue实现react类写法
借助vue-tsx-support结合vue-property-decorator这么一个库去实现它
npm i vue-tsx-support vue-property-decorator
在 Vue 中书写一些基础内容，包括纯文本、动态内容、标签使用、自定义组件的使用，这些跟我们平时使用单文件组件类似。
Attributes 的绑定跟普通的 HTML 结构一样，，如果动态属性，之前是 v-bind:placeholder="this.placeholderText" 变成了placeholder={this.placeholderText}
注意事项：
插槽
这里的写法和vue3的插件写法是一样。具体查看《Vue2/3插槽——vue3的jsx组件插槽slot怎么处理》,
className
vue-jsx-classname-to-class
支持在vue中书写jsx语法并支持和react jsx 一致的classname属性
具体查看：https://github.com/iptop/vue-jsx-classname-to-class
函数式组件
函数式组件是一个无状态、无实例的组件，详见官网说明
因为函数式组件只是一个函数，所以渲染开销也低很多。然而，对持久化实例的缺乏也意味着函数式组件不会出现在 Vue devtools 的组件树里。
个人理解因为没了状态(data)，少了很多响应式的处理，还有生命周期等过程会提高速度和减少内存占用吧？
新建一个 FunctionalComponent.js 文件（需增加配置functional: true），内容如下：
export default ({ props }) => <p>hello {props.message}</p>父组件中调用如下:
import funComponent from './FunctionalComponent'
render() {
return {/* 函数式组件 */}
<funComponent message="Gopal"></funComponent>
}
转载本站文章《vue2.x+vuex项目Typescript改造：vue模板从jsx到tsx需要注意的事项》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8779.html