vue中的异步组件和v-if有什么不同？

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

对于v-if来说，可以用它来控制组件的生成和销毁，那么对于父子模块来说，如果我想要让子组件满足一定条件下再进行创建，可以使用v-if的方式，通过日志可以发现，子组件只有在condition为true的时候才会加载
父组件中

vue"><Content/>
<div v-if="condition">
  <Child/>
</div>
import Child from './Child'
components: {
    Child
}

那么，我看网上帖子，对于异步组件，为什么还要使用动态导入的方式做进一步处理呢？
vue2

<Content/>
<div v-if="condition">
  <Child/>
</div>
components: {
    Child: () => import("./Child")
}

这两种方式有什么区别吗？它们实现的效果不都是父组件先加载Content组件，当condition为true的时候，再去加载Child组件吗?

参考链接
异步组件
vue官方文档-异步组件

回答：

虽然可能两者都满足了你的业务需求，但他们从概念上就是不同的，就好比苹果和走路一样，虽然可以在走路的时候吃苹果，但他俩不是一个概念，没有可比性

异步组件也是组件，与寻常组件不同的是，他单独打包成一个js，在组件加载的时候才会去加载这个js文件，这个过程是异步的，等js加载完成才会去渲染这个组件

v-if是一个指令，你可以当成if语句去看

回答：

如果是vuecli项目

  • 找到package.json，在build命令后面增加 --report
"scripts": {
   "build": "vue-cli-service build --report"
},
  • 运行build命令，两条都可以
npm run build
  • 在dist文件夹下面会生成report.html文件，直接双击打开即可在线查看打包之后的文件大小占比
  • 左侧展开侧边栏，可以搜索相应的模块

回答：

Dynamic import 的优点是可以用于拆包 split chunks，达到按需下载的目的。

假设你整个项目大小为 2M，入口文件 1M，Child 文件 1M。那么在 condition 为 true 之前只需要下载入口文件 1M，一旦条件为真，才会开始下载剩余的 1M Child 文件。

以上是 vue中的异步组件和v-if有什么不同？ 的全部内容， 来源链接： utcz.com/p/933296.html

回到顶部