• home > webfront > ECMAS > vue >

    vue2.x+vuex项目Typescript改造:vue模板从jsx到tsx需要注意的事项

    Author:zhoulujun Date:

    vue与TSX结合实现方案有很多种,个人推荐:@vue [email protected] [email protected] babel-helper-vue-jsx-merge-propsb


    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