vue3.0 + ts + jsx 实践手札

本人曾经是react开发者，有3年的react开发经验，后来因为工作需要转到vue技术栈，但一直对react的jsx写法念念不忘。Vue3.0出来后，本人也一直关注和学习 ，以下是本人对vue3.0 + ts + jsx的一些实践手札。

jsx的两种写法

第一种：不在render里面返回HTML,在 setup 中通过函数返回

在 setup 的函数返回值是一个函数的时候，这个函数会被作为 render 函数处理（这个返回值会覆盖在 opitons 中的 render 函数）

import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
  name: 'Home',
  setup() {
      const itemName = ref('520')
      const item = reactive({
          name: '鸿星尔克'
      })
    return () => {
      return (
        <div>
          Home
          {itemName.value}
          {item.name}
        </div>
      )
    }
  },
})

注意第一种 对基本数据要使用ref使之变成可以在模板中使用的数据 ，在模板中要使用.value来获取，享受不到结构 ref 了 ，感觉不太优雅，其实这样破坏了 setup 返回对象作为 view 和 model 层的接口

第二种：在render里面返回HTML

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>
    )
  }
})

第二种直接使用this获取参数

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>
    )
  }
})

在jsx中使用template模板指令

@vue/babel-plugin-jsx

npm install @vue/babel-plugin-jsx -D

配置babel

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

然后就可以使用v-model了

<input v-model={val} />

在render里的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 () => {
      return (
        <div ref={homeRef}>
          Home
          {itemName.value}
          {item.name}
        </div>
      )
    }
  },
})
​

在render里返回HTML则需要动态绑定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 (
        <!-- 当动态绑定时，我们可以将ref定义为回调函数，显式地传递元素或组件实例 -->
        <div ref={el => ctx.homeRef = el}>
          Home
          {ctx.itemName}
          {ctx.item.name}
        </div>
    )
  }
})

shims-vue.d.ts文件的作用

shims-vue.d.ts是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，加这一段是是告诉 ts，vue 文件是这种类型的。这一段删除，会发现 import 的所有 vue 类型的文件都会报错。