https://ssr.vuejs.org里客户端数据预取这段代码不理解？

  • Z时代
  • 2024-02-09
  • 分类：IT

https://ssr.vuejs.org里客户端数据预取这段代码不理解？

https://ssr.vuejs.org/zh/guid...

    const matched = router.getMatchedComponents(to)
    const prevMatched=router.getMatchedComponents(from)
    let diffed = false
    const activated = matched.filter((c, i) => {
      return diffed || (diffed = (prevMatched[i] !== c))
    })

这段方法中：

  1. 组件可以用!== 来判断吗？
  2. 找到符合的组件，然后之后的就都不判断了吗？

回答：

问题1 不行 按我的理解。这边在对比两个列表，activated的值是两个列表对比后 保留第一个不相同的值以及后面的所有值。
问题2 这段代码的逻辑的后续逻辑是都不判断了。不太明白这样的含义。直接使用!==只是简单的比对了地址。要是react的话 还有可能说对比成本高 迁移成本高。通过简化一些逻辑降低双节点树转换函数算法n ** 3 至 n。一个可能的原因是所有组件是严格按照顺序获取。如果发现列表中某个组件存在变更，这个组件及后续组件必须重新渲染。

回答：

不可以，逻辑是不一样的。

const bits = [0, 1, 0, 1];
bits.filter(b => b !== 0); // result: [1, 1]
let diffed = false;
bits.filter(b => diffed || (diffed = b !== 0)); // result: [1, 0, 1]

看出区别了吗？

不能只单纯对比组件是否相同，因为有可能它们的父组件不同、而导致渲染结果不同（比如嵌套路由里有共用的、keep-alive 的导航栏或者 Tab 这种），所以要从第一个不同的组件开始就顺序往下触发 asyncData。

P.S. 我看了你在 @lie5860 下的评论，是因为中文的这个示例是基于 asyncData 给出的，而 asyncData 是 nuxt 最早提出来的（2017 年下半年，具体日子我没查到），虽然没明说是 nuxt，但明眼人一看就看出来了；而在 Vue 2.6 以后已经提供了新的钩子函数 serverPrefetch（2019 年 2 月 4 日），已经无需你手动遍历了，Vue 自己会把生命周期安排的妥妥的。所以英文版的示例已经是基于新版本 Vue 给出的了，其他语言我看都没有同步更新。实际上你用哪种都可以。

以上是 https://ssr.vuejs.org里客户端数据预取这段代码不理解？ 的全部内容， 来源链接： utcz.com/p/936584.html

回到顶部