结合上一篇写的光环的光函数，去理解和在创造下面这个在数字孪生中常见的护盾 shield 。

mdb https://www.shadertoy.com/view/sdKXzd	xor https://www.shadertoy.com/view/cltfRf	FabriceNeyret2 https://www.shadertoy.com/view/M32GW3

# 国外超火的前端框架：Astro 5.0 正式发布！

Astro 5.0 带来了全新的 内容层 (Content Layer) 和 服务岛 (Server Islands) 功能，实现了从任意来源加载内容的能力，并将静态缓存内容与动态个性化内容完美结合，进一步提升开发效率和网站性能。

# 什么是 Astro？

Astro 是专注于构建内容驱动型网站（如博客、营销和电商）的现代 Web 框架，以快速加载和优秀的 SEO 表现为核心优势。

这篇文章对 flex 不熟也可以看。这篇文章只讲这三个属性。为了简单化，不会提到主轴交叉轴，也不讲方向，默认方向就是水平方向从左往右。但并不影响对这三个概念的理解。

# new URL(url, import.meta.url).href

new URL(url, import.meta.url).href

说明：第一个 url 为图片的相对路径

在 Vue 3 中， <keep-alive> 是一个内置组件，用于缓存动态组件的状态和 DOM。它的主要作用是避免组件被销毁和重新创建，从而保留组件的状态。然而，由于组件不会被销毁，某些生命周期钩子（如 mounted 和 unmounted ）不会被重新触发，这可能导致子组件的逻辑（如 JS 代码）没有被重新调用。

# 问题原因：

当组件被 <keep-alive> 包裹时：

1. 首次加载：组件会正常挂载，触发 mounted 钩子。
2. 切换到其他组件后返回：组件不会被销毁，而是从缓存中恢复，此时不会重新触发 mounted 钩子。
3. 子组件逻辑未重新执行：如果某些逻辑依赖于 mounted 或 created 钩子，它们不会再次执行。

css 计数器就是采用 css 给一些 html 元素自动生成编号，比如类似 1.3.2 ，代码如下：

<style type="text/css">

#demo1 ol { counter-reset: section; list-style-type: none; }

#demo1 ol li { counter-increment: section; }

#demo1 ol li:before { content: counters(section, ".") ". "; }

</style>

<div id="demo1">

    <ol>

        <li>进风口的爽肤水

            <ol>

                <li>非进口商的</li>

                <li>非进口商的</li>

                <li>非进口商的</li>

            </ol>

        </li>

        <li>进风口的爽肤水

            <ol>

                <li>非进口商的</li>

                <li>

                    非进口商的

                    <ol>

                        <li>将咖啡色的开发商</li>

                        <li>将咖啡色的开发商</li>

                        <li>将咖啡色的开发商</li>

                        <li>将咖啡色的开发商</li>

                    </ol>

                </li>

                <li>非进口商的</li>

            </ol>

        </li>

        <li>进风口的爽肤水</li>

    </ol>

</div>

# 基于 vue2.6+ElementUI 实现的可搜索下拉选择树

# 效果图

封装组件，支持单选，多选，搜索，根据节点 id 默认选中对应的节点，勾选数据事件触发回调

效果图 (会不断更新 和修复一些 BUG 记得回来看看哦)

认真看组件配置属性，特别是传值的时候 defaultProps 配置的展示 key，因为最后有模拟 JSON 数据所以文章有点长

多选效果图：	单选效果图：