vue3下jsx教学,保证业务上手无问题!手敲代码,有知识点,附带和template对比

·  阅读 7422

前言

原因:闲的。还有一个原因吗?嘿嘿

然后之前就说过了,我拿vue3直接干公司项目了,是内部的孵化项目,客户不多,但是也是正规的生产项目。

技术栈说明:

公司项目:js,element-plus,vue3,jsx,常规template,按需加载(单独领出来是因为这个也会导致你的项目填坑变多)

个人组件库研究项目:TypeScript,vue3,jsx,常规template

主要讲公司项目吧,公司项目上线一个月。还算稳定,不过我需要给没能力填坑的大家看一个截图。

element-plus提交issues

vue3提交issues

这里澄清下,vue3的bug其实目前来说可以说没有,单独我发现的方面,但是在使用过程中elementUI组件配合下发现了一个。这里提交的问题其实有一个核心处理点。其他都算是单纯的提问,不是bug。

小总结

可以上生产,但是要有一定填坑能力。但是时间够你折腾,那么就早点学起来吧。

一、vue3生产注意点

1、不能使用getCurrentInstance的ctx

大家在获取app.config.globalProperties.ELEMENT这里设置的ELEMENT这里设置的ELEMENT是要如下

这里的ctx不是steup里面提供的ctx,而是

const { ctx } = getCurrentInstance()
复制代码

这里ctx在生产环境下是获取不到的,请各位没玩过生产的别误人子弟,这还是我专门给vue3提交issues问来的。

正确应该使用

const { proxy } = getCurrentInstance()
复制代码

关于在ts中使用

在ts里面大家估计经常会遇到类型定义错误问题。

使用方式1

interface ProxyEx extends ComponentPublicInstance {
  $test: number
}

export default defineComponent({
  setup(props, ctx) {
    const self = getCurrentInstance() as ComponentInternalInstance
    const proxy = self.proxy as ProxyEx
    console.log(proxy?.$test)
    return {}
  },
})
复制代码

使用方式2

上述方案把类型定义到了页面内部,也可以弄一个全局文件去调用。但是总是不方便的。还有就是我们去扩展@vue/runtime-core文件,

然后我们可以在main.ts文件下面增加这段,也不会产生全局错误了

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $test: number
  }
}
复制代码

但是不能放在d.ts文件下面,否则会全局产生错误。我翻了好久的issues也没有找到方案。看官方后续优化解决吧。

二、jsx教学开始

关于jsx的官方教学地址:vue3js.cn/docs/zh/gui…

git部分:github.com/vuejs/jsx-n…

我这里就不放关于h函数的处理了,就直接用和react一样的编码方式来书写。主要是vue3的cli已经内置好了babel插件,也就是说大家不需要单独去引入babel插件。直接可以使用。

也就是大家可以这样写vue文件来书写jsx代码。这里我贴上简单示例

<script lang="tsx">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'test',
  emits: [],
  directives: {},
  props: {},
  setup(props, ctx) {
    return () => (
      <span>简单示例</span>
    )
  },
})
</script>
复制代码

Template对比

<template>
    <span>简单示例</span>
</template>
<script lang="tsx">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'test',
  emits: [],
  directives: {},
  props: {},
  setup(props, ctx) {
    return {},
})
</script>
复制代码

1、注意事项

1、html代码的js文件或者ts文件后缀名增加‘x’,原本是.js变成.jsx,ts变成.tsx

2、.vue文件的script标签增加 lang="tsx",这个呢是你里面存着jsx写法的就需要加。

比如这种情况

<template>
  <div class="experiment">
    <test-com>
      <template #default="de">{{ de }}</template>
    </test-com>
    <test-a></test-a>
  </div>
</template>

<script lang="tsx">
import { defineComponent } from 'vue'
import { TestCom } from './Test'

const TestA = () => <div>fdsafdsa</div>

export default defineComponent({
  components: { TestCom, TestA },
  setup(props, ctx) {
    return {}
  },
})
</script>
复制代码

3、常规jsx语法下是无法配合scpoedCss使用的,解决方法等下就讲

2、在.vue文件下面让你的jsx代码也可以使用scopedCss

也就是大家经常在css部分加的这个

**来源:**github.com/vuejs/jsx-n…

原理:只要取到 __scopeId, 就可以在 setup/render 函数中

其中可以得到__scopeId的方式

方案1:

// main.js
import { createApp } from 'vue';
import App from './App.vue'

createApp(App(App)).mount('#app') // 这里将 App 传回组件

// ./App.vue
export default ({ __scopeId }) => {
   // 这里可以取到 __scopeId
})
复制代码

方案2:

// ./App.vue
export default {
   render(ctx) {
       // ctx._.type.__scopeId
   }
}
复制代码

方案3: setup 可以返回一个 render 方法, 用于 render jsx

// ./App.vue
export default {
   setup() {
        return (ctx) {
             // ctx._.type.__scopeId
        }
   }
}
复制代码

上面的实现对于大家比较抽象,我这里提供一个自己的实现方式

<script lang="tsx">
import { defineComponent, withScopeId, getCurrentInstance } from 'vue'

export default defineComponent({
  setup(props, ctx) {
    const instance = getCurrentInstance()
    const scopeId = instance.type.__scopeId
    const withId = withScopeId(scopeId)

    return withId(() => <div class="ceshi">fdsafas</div>)
  },
})
</script>
复制代码

然后附上template对比

<template>
    <span>简单示例</span>
</template>
<script lang="tsx">
import { defineComponent} from 'vue'

export default defineComponent({
  setup(props, ctx) {},
})
</script>
<style scoped lang="scss">
.ceshi {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
复制代码

关于像cssModule,css-in-js等方案大家就自行研究。

3、关于class和style样式

这里提醒一下,大家不太会用的直接拿react代码套进来也可以。也就是你可以直接搜索react使用方式,然后这里一样可以用。就是注意下比如className和class这种区别。语法上两者真的差异不大

class部分使用和template部分没有差别

<span class="tooltip" ref={tooltip}>
复制代码

或者

动态方式就不太一样

<div class={{ 'test-red': classt }}></div>
复制代码

style部分如果是没有动态的那么和普通的写法没差异

但是动态的需要是这样的

<div style={{ visibility: data.show }}></div>
复制代码

4、在jsx里面使用ref,reactive等

import { defineComponent, ref, reactive } from 'vue'
const Testref = defineComponent({
  setup(props, ctx) {
    const dateone = ref('测试')
    const datetwo = reactive({
      test: '测试',
    })
    return () => (
      <div>
        <div>{dateone.value}</div>
        <div>{datetwo.test}</div>
      </div>
    )
  },
})
复制代码

template对比

<template>
  <div class="experiment">
    <div>{{ dateone }}</div>
    <div>{{ test }}</div>
  </div>
</template>

<script lang="tsx">
import { defineComponent, reactive, ref, toRefs } from 'vue'
export default defineComponent({
  setup(props, ctx) {
    const dateone = ref('测试')
    const datetwo = reactive({
      test: '测试',
    })
    return {
      dateone,
      ...toRefs(datetwo),
    }
  },
})
</script>
复制代码

5、使用插槽和具名插槽

官方vue3js.cn/docs/zh/gui…

const testslot = defineComponent({
  setup(props, ctx) {
    return () => (
      <div>
        {/*默认插槽*/}
        <div>{ctx.slots.default && ctx.slots.default()}</div>
        {/*具名插槽*/}
        <div>{ctx.slots.name && ctx.slots.name()}</div>
      </div>
    )
  },
})
复制代码

template对比

<template>
    <div>
      <slot></slot>
    </div>
    <div>
      <slot name="name"></slot>
    </div>
</template>
<script lang="tsx">
</script>
复制代码

6、作用域插槽使用

官方地址vue3js.cn/docs/zh/gui…

传参

const TestA = defineComponent({
  setup(props, ctx) {
    return () => <div>{ctx.slots.default && ctx.slots.default('作用域传参')}</div>
  },
})
复制代码

使用

const TestD = defineComponent({
  setup(props, ctx) {
    return () => (
      <div>
        <span>组件:TestD</span>
        <TestA
          v-slots={{
            default: (n: string) => <span>{n}</span>,
          }}
        />
      </div>
    )
  },
})
复制代码

template对比

**传参
**

<template>
    <div>
      <slot :defalut="作用域传参"></slot>
    </div>
</template>
<script lang="tsx">
</script>
复制代码

使用

<todo-list>
  <template v-slot:default="slotProps">
    <span class="green">{{ slotProps}}</span>
  </template>
</todo-list>
复制代码

7、v-if 和 v-for

官方:vue3js.cn/docs/zh/gui…

const iffor = defineComponent({
  setup(props, ctx) {
    const ces = true
    const ifelse = () => {
      if (ces) return <div>if部分</div>
      else return <div>else部分</div>
    }

    const forarr = () => {
      let i = 0
      return new Array(10).fill('').map(() => {
        i++
        return <span>{i}</span>
      })
    }

    return () => (
      <div>
        {ifelse()}
        {forarr()}
      </div>
    )
  },
})
复制代码

template对比

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
复制代码

8、v-model的使用

<input type="text" v-model={inpt.value} onChange={onInput} />
复制代码

template部分我就不放了,太简单了

9、jsx情况下可以不要.vue文件示例

示例1:

export const TestCom = defineComponent({
  setup(props, ctx) {
    return () => <TestD />
  },
})
复制代码

示例2:

import { ref } from 'vue'
interface Props {
  text: string
}

// ref不能放在组件内部,否则会重新赋值,导致不会响应式变化
const num = ref(1)
const dataone = ref('测试无defineComponent数据变化')

const addnum = () => {
  num.value++
}
const inpt = ref('')
const onInput = () => {
  console.log(inpt.value)
}

const NoDcom = (props: Props, ctx: any) => {
  //console.log(props, ctx)
  return (
    <div>
      <div>{dataone.value}</div>
      <button onClick={addnum}>点击测试数据变化</button>
      <div>变化的数字{num.value}</div>
      <input type="text" v-model={inpt.value} onChange={onInput} />
    </div>
  )
}
export default NoDcom
复制代码

10、关于在vue文件组件注册

注意jsx的文件就不要加jsx后缀了

使用和常规的组件注册一样

import { TestCom } from './Test'

export default defineComponent({
  components: { TestCom},
  setup(props, ctx) {
    return {}
  },
})
</script>
复制代码

11、关于click事件之类

原本模板中是@click,全部改为onClick模式,和react比较相似

举例

<input type="text" v-model={inpt.value} onInput={onInput} onChange={onInput} />
复制代码

template

<input type="text" v-model="inpt.value" @input="onInput" @change="onInput" />
复制代码

12、使用Teleport

在jsx下使用vue内置的组件需要额外导入组件,并且名称不能变。

import { defineComponent, Teleport } from 'vue'
// 使用Teleport
const teleportCum = defineComponent({
  setup(props, ctx) {
    return () => (
      <Teleport to="body">
        <div>teleport值</div>
      </Teleport>
    )
  },
})
复制代码

Template使用

并且是不需要单独导入,也没有大小写区分的问题

<template>
  <teleport></teleport>
</template>
复制代码

13、使用Transition

和使用teleport一样,就不单独写代码了。上面的例子一样,把Teleport换成Transition就可以跑了

14、关于指令修饰符

官方自带的指令修饰符方面是说类似自己实现

地址:v3.cn.vuejs.org/guide/rende…

然后我个人在项目中因为自定义了一个可以随意拖动的v-move指令,并且定义了boundary修饰符代表是否可以只在父元素范围内移动。这时候就很烦了

最后多方百度下至少自定义的指令修饰符是通过“_”连接,如下

<div class="dht-float-win" v-dht-move_boundary={{ callmove: startmove, callstop: stopmove }}>
       {ctx.slots.default && ctx.slots.default()}
</div>
复制代码

而template里面

<div class="dht-float-win" v-dht-move.boundary="{ callmove: startmove, callstop: stopmove }">
       <slot></slot>
</div>
复制代码

三、关于jsx和常规的sfc(vue文件方式)

写到这里,说实在我有点想不到该写什么。jsx给我的感觉就是在用react语法。为什么呢?因为这个babel插件是阿里团队优先搞出来了,然后大家都知道阿里是react技术栈为主的。所以语法上面靠近react。

我说说我的几个见地吧

1、jsx并没有更加方便,只是让你更接近vue模板渲染的底层原理

2、jsx语法灵活很多,光我上面就出现了两种jsx书写方式,个人还是推荐defineComponent方式,更加是一个整体

3、jsx书写会比较强迫的让你把for循环等小逻辑模板单独成为一个函数,优点就是颗粒度更小了,和sfc书写方式相比,没有那么方便。

特别是什么呢,我上面的提供方式优点不方便在return部分写逻辑,如果你写if会报错,官方方面都是用的render方式,其实两者的差异并不大

4、如果你用vue那么jsx可以作为一种优化方式(官方推荐使用template方式意味着,template方式bug会优先解决),而不是大规模使用。特别是中小公司,大公司也好不到那里去。除了业内头部公司,有几个团队能完全规范化的呢?

这里我说一句话:何不食肉糜?

要是全用jsx,那我还是用react吧。何况react薪资更高呢

5、jsx一定要学,但是ts更要学。虽然未来一定不是ts的天下(浏览器领域),但是ts所带来的影响已经把中高端领域覆盖。

6、学习jsx是让你拓宽视野,react生态毕竟是领头羊。

四、关于vue3书写方式,我想新手很容易写出这种代码吧。

放一个我个人封装的组件地址github.com/ht-sauce/vi…

文档地址:www.yuque.com/cv8igf/oy3c…

这恐怕就是大佬所担心的面条式代码,说白了,这就是vue2所带来的习惯。vue3的情况下,那么props,函数,响应式部分都是可以抽离到单独的js文件,但是vue2恐怕只能抽离props部分了。

<script lang="tsx">
import { dataType, visibility } from './types'
import { defineComponent, onMounted, ref, reactive, onUnmounted, watch } from 'vue'
import { createPopper } from '@popperjs/core'
import type { Instance, Options } from '@popperjs/core'
import ClickOutside from '../ClickOutside'
export default defineComponent({
  name: 'DhtPopper',
  emits: ['update:modelValue', 'hide', 'show'],
  directives: {
    'dht-click-outside': ClickOutside.directive,
  },
  props: {
    trigger: {
      type: String,
      default: 'hover', // hover,click,manual
    },
    modelValue: Boolean, // 手动绑定
    disabled: {
      type: Boolean,
      default: false,
    },
    arrow: {
      type: Boolean,
      default: true,
    },
    offset: {
      type: Number,
      default: 16,
    },
    placement: {
      type: String,
      default: 'bottom',
    },
    options: {
      type: Object,
      default: () => null, // 出现ts问题参考:https://github.com/vuejs/vue-next/issues/2474
    },
    clickOutside: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, ctx) {
    let popperInstance: Instance | null = null

    const data = reactive({
      show: 'hidden',
    } as dataType)

    // 被绑定的
    const popper = ref<string | HTMLElement>('popper')
    // 会移动的,这是提示内容
    const tooltip = ref<string | HTMLElement>('tooltip')

    // 合并参数
    function mergeOptions() {
      const opt = {
        placement: props.placement,
        ...props.options,
      } as Options
      const modifiers = []

      modifiers.push({
        name: 'offset',
        options: {
          offset: [0, props.offset],
        },
      })

      opt.modifiers = [...modifiers]
      return opt
    }

    onMounted(() => {
      if (props.disabled) return false

      const popperDom = popper.value as HTMLElement
      const tooltipDom = tooltip.value as HTMLElement

      popperInstance = createPopper(popperDom, tooltipDom, mergeOptions())
    })

    onUnmounted(() => {
      ;(popperInstance as Instance)?.destroy()
      popperInstance = null
    })

    function hide() {
      data.show = visibility.hidden
      ctx.emit('update:modelValue', false)
      ctx.emit('hide')
    }

    function show() {
      data.show = visibility.visible
      ctx.emit('update:modelValue', true)
      ctx.emit('show')
    }

    // 点击事件
    function onClick() {
      if (props.trigger !== 'click') return null
      if (data.show === 'hidden') show()
      else hide()
    }

    function onMouseover() {
      if (props.trigger !== 'hover') return null
      show()
    }

    function onMouseout() {
      if (props.trigger !== 'hover') return null
      hide()
    }

    watch(
      () => props.modelValue,
      (e) => {
        if (props.trigger !== 'manual') return null

        if (e) show()
        else hide()
      },
    )

    function clickOutside() {
      if (props.trigger === 'hover') return
      if (data.show === 'hidden') return
      if (props.clickOutside) hide()
    }

    return () => (
      <span v-dht-click-outside={clickOutside} class="dht-popper">
        <span ref={popper} onClick={onClick} onMouseover={onMouseover} onMouseout={onMouseout}>
          {ctx.slots.default && ctx.slots.default()}
        </span>
        <span class="tooltip" style={{ visibility: data.show }} ref={tooltip}>
          {props.arrow && <span class="arrow" data-popper-arrow />}
          {ctx.slots.tooltip && ctx.slots.tooltip()}
        </span>
      </span>
    )
  },
})
</script>
复制代码

五、致谢

谢谢大家观看。喜欢的点个赞。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改