vue3中可以帮助你早点下班的9个开发技巧!

共 6285字,需浏览 13分钟

 ·

2022-04-29 02:49

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群


vue3也发布很长时候了,官方也将默认版本切换为vue3,而且也出现了完善的中文文档[1],不知同志们是否已经使用了了呢?

本渣体验了一段时间,还是相当的丝滑,些许开发经验奉上,望大家能早点下班

也可以看下 源码解析github vue-next-analysis[2](未完待续持续更新中....)

善用h(createVNode)和render 函数

我们知道在vue3中导出了一个神奇的createVNode 函数 当前函数它能创建一个vdom,大家不要小看vdom, 我们好好利用它,就能做出意想不到的效果比如我们要实现一个弹窗组件

我们通常的思路是写一个组件在项目中引用进来,通过v-model来控制他的显示隐藏,但是这样有个问题,我们复用的时候的成本需要复制粘贴。我们没有办法来提高效率,比如封装成npm 通过调用js来使用。

然而,有了 createVNode 和render 之后所有问题就迎刃而解了

// 我们先写一个弹窗组件
        const message = {
            setup() {
                const num = ref(1)
                return {
                    num
                }
            },
            template: `

                        
{{num}}

                        
这是一个弹窗

                      
`
        }
复制代码
  // 初始化组件生成vdom
  const vm = createVNode(message)
  // 创建容器,也可以用已经存在的
  const container = document.createElement('div')
  //render通过patch 变成dom
  render(vm, container)
// 弹窗挂到任何你想去的地方  
document.body.appendChild(container.firstElementChild)
复制代码

经过上面这一通骚操作,我们发现我们可以将他封装为一个方法,放到任何想放的地方。

善用JSX/TSX

文档上说了,在绝大多数情况下,Vue 推荐使用模板语法来搭建 HTML。然而在某些使用场景下,我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。

jsx和模板语法的优势对比

jsx和模板语法都是vue 支持的的书写范畴,然后他们确有不同的使用场景,和方式,需要我们根据当前组件的实际情况,来酌情使用

什么是JSX

JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性

模板语法的优势

  • 1、模板语法书写起来不怎么违和,我们就像在写html一样
  • 2、在vue3中由于模板的可遍历性,它能在编译阶段做更多优化,比如静态标记、块block、缓存事件处理程序等
  • 3、模板代码逻辑代码严格分开,可读性高
  • 4、对JS功底不那么好的人,记几个命令就能快速开发,上手简单
  • 5、vue官方插件的完美支持,代码格式化,语法高亮等

JSX的优势

  • 1、灵活、灵活、灵活(重要的事情说三遍)
    复制代码
  • 2、一个文件能写好多个组件
    复制代码
  • 3、只要JS功底好,就不用记忆那么多命令,上来就是一通输出
    复制代码
  • 4、JS和JSX混用,方法即声明即用,对于懂行的人来说逻辑清晰
    复制代码

对比

由于vue对于JSX的支持,社区里,也是争论来争论去,到底要分个高低,然后本渣认为,他俩本来没有高低,您觉得哪个适合,就用哪个即可,缺点放在对的地方他就是优势 要发扬咱们老前辈们传下来的中庸之道,做集大成者,将两者结合使用,就能发挥无敌功效,乱军之中博老板青睐。

接下来说一下本人的一点粗浅理解,我们知道组件类型,分为容器型组件和展示展示型组件 在一般情况下,容器型组件,他由于可能要对于当前展示型组件做一个标准化或者宰包装,那么此时容器型组件中用JSX就再好不过

举个例子:现在有个需求,我们有两个按钮,现在要做一个通过后台数据来选择展示哪一个按钮,我们通常的做法,是通过在一个模板中通过v-if去控制不同的组件

然而有了JSX与函数式组件之后,我们发现逻辑更清晰了,代码更简洁了,质量更高了,也更装X了

我们来看

先整两个组件

//btn1.vue