引言:每周分享一些前端咨询新闻,以及一些有趣的前端技术
文章目录
一、技术相关
1. vue开发技巧(提升效率)
1.1 善用h(createVNode)和render 函数
在vue3中导出了一个神奇的 createVNode 函数 当前函数它能创建一个 vdom,不要小看vdom,好好利用它,就能做出意想不到的效果。
比如我们要实现一个弹窗组件。我们通常的思路是写一个组件在项目中引用进来,通过v-model来控制他的显示隐藏,但是这样有个问题,我们复用的时候的成本需要复制粘贴。我们没有办法来提高效率,比如封装成npm通过调用js来使用。然而,有了 createVNode 和 render 之后所有问题就迎刃而解了。
// 写一个弹窗组件
const message = {
setup() {
const num = ref(1)
return {
num
}
},
template: `<div>
<div>{{num}}</div>
<div>这是一个弹窗</div>
</div>`
}
// 初始化组件生成vdom
const vm = createVNode(message)
// 创建容器,也可以用已经存在的
const container = document.createElement('div')
//render通过patch 变成dom
render(vm, container)
// 弹窗挂到任何你想去的地方
document.body.appendChild(container.firstElementChild)
1.2 善用JSX/TSX
JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性。
举个例子:现在有个需求,我们有两个按钮,现在要做一个通过后台数据来选择展示哪一个按钮,我们通常的做法,是通过在一个模板中通过v-if去控制不同的组件
然而有了JSX与函数式组件之后,我们发现逻辑更清晰了,代码更简洁了,质量更高了
// 用JSX配合函数式组件来做一个容器组件
import btn1 from './btn1.vue'
import btn2 from './btn2.vue'
export const renderFn = function (props, context) {
return props.type == 1 ? <btn1>{context.slots.default()}</btn1> : <btn2>{context.slots.default()}</btn2>
}
//业务组件
<template>
<renderFn :type="1">1111111</renderFn>
</template>
<script>
import { renderFn } from './components'
console.log(renderFn)
export default {
components: {
renderFn
},
setup() {
},
};
</script>
1.3 善于使用getCurrentInstance 获取组件实例
getCurrentInstance 支持访问内部组件实例,通常情况下他被放在 setup中获取组件实例,但是 getCurrentInstance 只暴露给高阶使用场景,典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。
那他的作用是什么呢? 还是逻辑提取,用来代替Mixin,这是在复杂组件中,为了整个代码的可维护性,抽取通用逻辑这是必须要去做的事情,我们可以看element-plus 中table的复用逻辑,在逻辑提取中由于涉及获取props、proxy、emit 以及能通过当前组件获取父子组件的关系等,此时getCurrentInstance 的作用无可代替。
还有一些实用的小技巧未作分享, → 了解更多
2. VSCode debug
VS Code的关键特性之一就是它具有强大的调试(debug)功能,内置的调试器(debugger)可以帮助开发者快速的编辑、编译和调试。
VS Code内置的调试器支持Node.js运行时,并且能够调试JavaScript、TypeScript、以及任意其他能够编译成JavaScript的语言。
文章介绍了 VSCode 中 debug 的面板、运行配置和几种不同的断点,→ 查看具体操作
二、前端资讯
1. 新版vue3文档
新文档地址:vuejs.org
中文版翻译:staging-cn.vuejs.org
→ 快速了解新文档内容和特点
2. 组件驱动式Web设计
自从著名设计师 Ethan Marcotte(@beep)在 A List Apart 上发表了一篇名为《 Responsive Web Design 》的文章之后,响应式网页设计(RWD,即 Responsive Web Design)的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来,CSS 也发生了巨大的变化,新增了很多新的特性,近两年尤其如此。这些变化,对于响应式Web设计的开发也有较大的改变。Una Kravets(@Una)大神,在2021的Google I/O 大会上的分享,提出 新的响应式:组件驱动式 Web 设计。 Web 生态即将进入响应式 Web 设计的新时代,并转变我们对其含义的看法,也为会Web设计带来新的变化。组件式驱动 Web 设计(或开发)也被称为是下一代响应式 Web 设计(或开发)。如果你对这方面话题感兴趣的话,请点击下面链接。
转载自:https://www.w3cplus.com/css/the-new-responsive-web-design-component-driven-web-design.html
3. 2022年的CSS
在过去的 2021 年,CSS 变化非常地大,其中新增了很多特性,比如 CSS 容器查询、CSS 父选择器、CSS 层叠控制规则、CSS 子网格等等。而且这些特性已经在个别,甚至是在大部分主流浏览器已经可以看到了。几大主流浏览器(Chrome、Firefox、Safari和Edge)还专注于修复浏览器兼容性痛点,让 Web 开发者的工作变得更轻松。文章介绍了上面列出的一些 CSS 新特性(也有新语法)
转载自:https://www.w3cplus.com/css/what-is-new-css-in-2022.html