【前端周记（一）】

---

引言：每周分享一些前端咨询新闻，以及一些有趣的前端技术

一、技术相关

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