小编Ser*_*nov的帖子

在查看我的给定网页时，Chrome表现出巨大的滞后性。我正在使用“ DevTools 性能”选项卡尝试查找我认为在我的JavaScript代码中某处的罪魁祸首。

以下屏幕截图显示了使用DevTools记录的配置文件。对于配置文件中显示的某些“任务”，我可以看到任务执行的详细信息（例如，在8700毫秒到9200毫秒之间的是GC），但是对于其他任务则没有任何详细信息，例如我在屏幕截图中突出显示的两个。我如何弄清楚这些任务在做什么？

在 Google Chrome 中使用大量隐藏项目时遇到一些问题。

最近，我发布了一个很多人认为晦涩难懂的问题，很快就被关闭了。我找到了这个问题的原因，但到目前为止我不知道如何解决它。

有时在开发页面时，会使用一种方法，即预先创建一些元素并隐藏，然后在必要时显示。

所以此类元素的数量会极大地影响浏览器的响应速度。假设我们有以下代码：

var elem = document.getElementsByClassName ('Founder') [0];
var parent = document.getElementsByClassName ('Cloud') [0];
var empty = document.getElementsByClassName ('empty') [0];
for (var i = 0; i <50000; i ++) {
var clone = elem.cloneNode (true);
    // var clone = empty.cloneNode (true);
clone.style.display = 'none';
        parent.appendChild (clone);
    }

<div class = 'Cloud'>
<input class = 'Founder' type = 'text'>
<div class = 'empty'> </div>
</div>

因此，当我在 Firefox（67.0（64 位））中启动它时，没有特殊的刹车。但是当我在 Chrome 版本 74.0.3729.169（官方版本）（64 位）中运行它时，我得到了强大的刹车。 …

例如，我们有 posta api，它可以返回帖子（获取）并创建新帖子（帖子）。

首先我需要将它们放在服务器端。我就是在asyncData选项上这样做的。我使用useFetch可组合来防止$fetch双重数据获取。 https://nuxt.com/docs/api/utils/dollarfetch

好的，我有服务器端获取的发布数据。但现在我希望能够使用options api 方法添加一些数据。

我的函数是否应该带有异步前缀，或者如果我只在客户端使用它，那就不必要了？如果我只想在客户端使用该功能，我应该使用哪种方法来发布一些数据？

export default defineNuxtComponent({
   
    async asyncData () {
        return {
            posts: useFetch ('/api/posts')['data']
        }
    },

   methods:{
    post(event : Event) {
        event.preventDefault();

        // post form data to api

       $fetch('/api/posts',{
            method: 'POST',
            body: JSON.stringify(this.form)
        })
        // this.posts.push(data);

    
    },
}

正在使用

 the $fetch('/api/posts',{
            method: 'POST',
            body: JSON.stringify(this.form)
        }) 

是正确的方法吗？之后我如何刷新客户端的帖子。就像是

axios.post().then(data)=>{this.posts.push(data)} 

在官方文档https://nuxt.com/docs/getting-started/data-fetching中 说：

useFetch、useLazyFetch、useAsyncData 和 useLazyAsyncData 仅在安装或生命周期挂钩期间工作

在 nuxt 模块站点https://axios.nuxtjs.org/中 说： …