vue中destroyed应用于啥场景?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中destroyed应用于啥场景?相关的知识,希望对你有一定的参考价值。

参考技术A

在 Vue 中,destroyed 生命周期钩子函数应用于以下场景:

    清理定时器和事件监听器:在组件销毁时,需要清除所有在组件中创建的定时器和事件监听器,避免因为未清理而导致内存泄漏。

    取消异步请求:如果组件中使用了异步请求,需要在组件销毁时取消这些请求,以免因为异步请求未完成而导致数据混乱或者浪费网络资源。

    清理非响应式的组件状态:在某些情况下,组件中可能会存在一些非响应式的状态(即不在 data 中声明的变量),例如计时器的标志位等。在组件销毁时,需要手动清理这些状态,以免影响其他组件或者重新创建组件时出现问题。

    取消订阅事件:如果组件中订阅了事件或者消息通信,需要在组件销毁时取消这些订阅,避免出现内存泄漏。

    总之,在任何需要清理组件的操作或者资源时,都可以使用 destroyed 生命周期钩子函数来释放相应的资源和状态,以保证组件正常销毁并释放内存。

在 CSS 文件中使用相对 URL,它相对于啥位置?

【中文标题】在 CSS 文件中使用相对 URL,它相对于啥位置?【英文标题】:Using relative URL in CSS file, what location is it relative to?在 CSS 文件中使用相对 URL,它相对于什么位置? 【发布时间】:2010-10-30 17:45:08 【问题描述】:

在 CSS 文件中定义诸如背景图像 URL 之类的内容时,当使用相对 URL 时,它相对于哪里?例如:

假设文件/stylesheets/base-styles.css包含:

div#header  
    background-image: url('images/header-background.jpg');

如果我通过 <link ... /> 将此样式表包含到不同的文档中,CSS 文件中的相对 URL 是否会相对于 /stylesheets/ 中的样式表文档相对于当前文档它包含到?可能的路径,例如:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

【问题讨论】:

【参考方案1】:

根据W3:

部分 URL 被解释为相对于样式表的来源,而不是相对于文档

因此,在回答您的问题时,它将与/stylesheets/ 相关。

如果您考虑这一点,这是有道理的,因为 CSS 文件可以添加到不同目录中的页面中,因此将其标准化为 CSS 文件意味着 URL 将在样式表链接的任何位置起作用。

【讨论】:

看起来规则有一个例外:-ms-behavior in IE :( 还有一个例外:当 url 是自定义属性的默认值时。假设您定义了.banner background-image: var(--bgimg, url('images/default.jpg')); ,但还没有为--bgimg 定义值。然后在页面/index.html 上,.banner 将查找/images/default.jpg,但在另一页/about/index.html.banner 将查找/about/images/default.jpg。非常破碎的海事组织。 更正:Chrome v60修复了上述默认值bug。 如果你的 css 在一个包中,那么路径真的无关紧要。它不是你想的那样,没有什么是相对的了。 我在使用属性时遇到了问题:background: var(--primary-color-background) no-repeat center center url("maps.jpg"); 这在 IOS 和 Safari 中不起作用。只有绝对路径 /resources/maps.jpg 在 Safari 中与 css 属性结合使用。【参考方案2】:

它与 CSS 文件有关。

【讨论】:

【参考方案3】:

它与样式表相关,但我建议将 URL 设为相对于您的 URL:

div#header  
  background-image: url(/images/header-background.jpg);

这样,您可以移动文件,而无需在未来重构它们。

【讨论】:

前面多出来的“/”有什么区别? 就像命令行中的路径名一样,路径前面的 / 表示它指向当前 Web 服务器上的绝对资源。 实际上有一种情况,使用相对于 CSS 文件的 URI 会更好。就我而言,我有一个目录“/css/”,其中放置了所有 CSS 数据。现在,我想在一个单独的文件夹中测试网站上的新功能。很难测试,例如测试文件夹中的新背景图像。这完全取决于您的需求... 绝对路径使得很难将解决方案放在域的子文件夹中。您想要支持子文件夹的原因有很多。它使测试变得更容易(正如 Diego 所提到的),您可以将以前的版本/预发布版本与 prod 放在同一个域中。企业代理服务器设置为支持 SSO、将所有解决方案移至一个域等的未来变化。尤其是使用 SSL,可能希望避免维护多个域名的开销。对我来说,这些考虑比“更容易移动我的 .css 文件”更重要。 图像和类似的东西无论如何都会进入 cdn,所以这是完美的【参考方案4】:

为了创建不依赖于资源绝对位置的模块化样式表,作者可以使用相对 URI。相对 URI(定义在 [RFC3986] 中)使用基本 URI 解析为完整 URI。 RFC 3986 第 5 节定义了此过程的规范算法。对于 CSS 样式表,基本 URI 是样式表的,而不是源文档的。

例如,假设以下规则:

body  background: url("yellow") 

位于由 URI 指定的样式表中:

http://www.example.org/style/basic.css

源文档的 BODY 的背景将与 URI 指定的资源所描述的任何图像平铺

http://www.example.org/style/yellow

用户代理在处理无效 URI 或指定不可用或不适用资源的 URI 的方式上可能会有所不同。

取自CSS 2.1 spec。

【讨论】:

【参考方案5】:

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

(其他任何东西都会被破坏,IMNSHO)

【讨论】:

【参考方案6】:

使用自动最小化 css 时可能会出现一个问题,并且似乎会破坏这个问题。缩小包的请求路径可以具有与原始 css 不同的路径。这可能会自动发生,因此会引起混淆。

缩小包的映射请求路径应该是“/originalcssfolder/minifiedbundlename”,而不仅仅是“minifiedbundlename”。

换句话说,将您的包命名为与原始文件夹结构具有相同的路径(使用 /),这样任何外部资源(如字体、图像)都将映射到浏览器的正确 URI。另一种方法是在你的 css 中使用绝对 url( refs 但这通常是不可取的。

【讨论】:

这为我节省了大量时间!谢谢。应该记录更多【参考方案7】:

尝试使用:

body 
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);

Images 是存放您要发布的图片的文件夹。

【讨论】:

以上是关于vue中destroyed应用于啥场景?的主要内容,如果未能解决你的问题,请参考以下文章

Vue生命周期钩子函数的使用以及应用场景

请简要描述一下hadoop,spark,mpi三种计算框架的特点以及分别适用于啥样的场景

problem:vue组件局部刷新,在组件销毁(destroyed)时取消刷新无效问题

匿名模块可以服务于啥目的?

R语言里面的向量指的是啥,和数组有啥分别?应用于啥上面?

四:SpringThinking